修改服务绑定功能

wuxw

2019-07-16 e108ff50d948e7b8f85a07a8ec708699df745c82

修改服务绑定功能

 OrderService/pom.xml

@@ -11,7 +11,7 @@

    <artifactId>OrderService</artifactId>

    <name>CenterService</name>
    <name>OrderService</name>
    <!-- FIXME change it to the project's website -->
    <url>http://maven.apache.org</url>


 WebService/src/main/resources/components/service-binding/serviceBinding.css

@@ -1,3 +1,8 @@
.wizard > .steps > ul > li {
    width: 33.33%;
}
}

.java110_step{
    width:80%;
    margin: 20px auto 50px auto;
}

 WebService/src/main/resources/components/service-binding/serviceBinding.html

@@ -1,26 +1,7 @@
<div id="component" >

    <div class="row" class="wizard-big wizard clearfix">
        <div class="steps clearfix">
            <ul role="tablist">
                <li role="tab" v-bind:class="{ current: serviceBindingInfo.step==1,vc_disabled:serviceBindingInfo.step!=1 }" >
                    <a>
                        <span class="current-info audible">current step: </span>
                        <span class="number">1.</span> 选择应用
                    </a>
                </li>
                <li role="tab" v-bind:class="{ current: serviceBindingInfo.step==2,vc_disabled:serviceBindingInfo.step!=2 }">
                    <a>
                        <span class="number">2.</span> 选择服务
                    </a>
                </li>
                <li role="tab" v-bind:class="{ current: serviceBindingInfo.step==3,vc_disabled:serviceBindingInfo.step!=3 }">
                    <a>
                        <span class="number">3.</span> 确认绑定
                    </a>
                </li>
            </ul>
        </div>
    <div class="java110_step">
        <div id="step" ></div>
    </div>

    <!-- 选择 应用信息 -->
@@ -28,4 +9,14 @@
               callBackComponent = "sellCar"
    ></vc:create>



    <div class="row">
        <div class="col-md-10"></div>
        <div class="col-md-2">
            <button type="button" class="btn btn-secondary" v-on:click="_prevStep()">上一步</button>
            <button type="button" class="btn btn-primary" style="margin-left:10px" v-on:click="_nextStep()">下一步</button>
        </div>
    </div>

</div>

 WebService/src/main/resources/components/service-binding/serviceBinding.js

@@ -7,18 +7,32 @@
    vc.extends({
        data:{
            serviceBindingInfo:{
                step:1,
                $step:'',
            }
        },
        _initMethod:function(){
            vc.component._listServices(DEFAULT_PAGE, DEFAULT_ROWS);
            vc.component._initStep();
        },
        _initEvent:function(){

        },
        methods:{
            _listServices:function(_page, _rows){

            _initStep:function(){
                vc.component.serviceBindingInfo.$step = $("#step");
                vc.component.serviceBindingInfo.$step.step({
                    index: 0,
                    time: 500,
                    title: ["选择应用", "选择服务", "确认绑定"]
                });
                //vc.component.serviceBindingInfo.step = $step.getIndex();
            },
            _prevStep:function(){
                vc.component.serviceBindingInfo.$step.prevStep();
                //vc.component.serviceBindingInfo.step = $step.getIndex();
            },
            _nextStep:function(){
                vc.component.serviceBindingInfo.$step.nextStep();
                //vc.component.serviceBindingInfo.step = $step.getIndex();
            }
        }
    });

 WebService/src/main/resources/static/css/jquery.step.css

New file
@@ -0,0 +1,71 @@
body,
div,
ul,
li {
    margin: 0;
    padding: 0;
}

body {
    font-family: "微软雅黑";
}

.ui-step-wrap {
    position: relative;
}

.ui-step-wrap .ui-step-bg,
.ui-step-wrap .ui-step-progress {
    height: 6px;
    position: absolute;
    top: 50px;
    left: 0;
}

.ui-step-wrap .ui-step-bg {
    width: 100%;
    background: #ddd;
}

.ui-step-wrap .ui-step-progress {
    width: 0;
    background: #64BD2E;
}

.ui-step-wrap .ui-step {
    position: relative;
    z-index: 1;
    list-style: none;
}

.ui-step-wrap .ui-step:after {
    content: '';
    display: table;
    clear: both;
}

.ui-step-wrap .ui-step .ui-step-item {
    float: left;
}

.ui-step-wrap .ui-step .ui-step-item div {
    text-align: center;
    color: #625454;
}

.ui-step-wrap .ui-step .ui-step-item .ui-step-item-num {
    margin-top: 18px;
}

.ui-step-wrap .ui-step .ui-step-item .ui-step-item-num span {
    display: inline-block;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #dad9d9;
}

.ui-step-wrap .ui-step .ui-step-item.active .ui-step-item-num span {
    color: #fff;
    background: #64BD2E;
}

 WebService/src/main/resources/static/js/jquery.step.min.js

New file
@@ -0,0 +1 @@
!function(i){i.fn.step=function(e){var t=this,n={index:0,time:400,title:[]},s=(e=i.extend({},n,e)).title,d=s.length,u=e.time,p=(1/d)*100;t.index=e.index;var a=function(){var e="";s.length>0&&(e+='<div class="ui-step-wrap"><div class="ui-step-bg"></div><div class="ui-step-progress"></div><ul class="ui-step">',i.each(s,function(i,t){e+='<li class="ui-step-item"><div class="ui-step-item-title">'+t+'</div><div class="ui-step-item-num"><span>'+(i+1)+"</span></div></li>"}),e+="</ul></div>"),t.append(e),t.find(".ui-step").children(".ui-step-item").width(p+'%'),t.toStep(t.index)};return t.toStep=function(e){var n=t.find(".ui-step").children(".ui-step-item");t.index=e,t.find(".ui-step-progress").animate({width:p*(e+1)+'%'},u,function(){i.each(n,function(t){t>e?i(this).removeClass("active"):i(this).addClass("active")})})},t.getIndex=function(){return t.index},t.nextStep=function(){t.index>d-2||(t.index++,t.toStep(t.index))},t.prevStep=function(){t.index<1||(t.index--,t.toStep(t.index))},a(),this}}(jQuery);

 WebService/src/main/resources/views/serviceBindingFlow.html

@@ -7,7 +7,8 @@
    <meta charset="UTF-8"/>
    <title>服务绑定|java110</title>
    <vc:create name="commonTop"></vc:create>
    <link href="/css/plugins/steps/jquery.steps.css" rel="stylesheet"/>
    <link href="/css/jquery.step.css" rel="stylesheet"/>
    <script src="/js/jquery.step.min.js" ></script>
</head>
<body>
<vc:create name="bodyTop"></vc:create>
@@ -33,5 +34,6 @@
</div>

<vc:create name="commonBottom"></vc:create>

</body>
</html>