采美豆改版

src/main/resources/static/css/base/base.h5.css

@@ -227,9 +227,13 @@
 }
 /*采美豆弹窗样式*/
 .cmbeans-alert-box{width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;flex-direction: column;position: fixed;left: 0;top: 0;background: rgba(51,51,51,0.5);z-index: 99999;}
+.cmbeans-alert-image{width: 87.2vw;height: 68.6vw;position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: auto;box-sizing: border-box;}
+.cmbeans-alert-image img{width: 87.2vw;height: 68.6vw;display: block;}
+.cmbeans-alert-image .mIcon{width:8vw;height:8vw;display: block;position: absolute;top: 45px;right: -3px;cursor: pointer;}
+.cmbeans-alert-image .mIcon:before{width:8vw;height:8vw;background-position:-34.1vw -77.9vw;}
 .cmbeans-alert-content{width: 71vw;height: 92vw;position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: auto;box-sizing: border-box;padding-top: 54.6vw;background-size: cover;}
-.cmbeans-alert-content .icon{width:30px;height:30px;display: block;position: absolute;top: 45px;right: -35px;cursor: pointer;}
-.cmbeans-alert-content .icon:before{width:33px;height:33px;background-position:-34.1vw -77.6vw;}
+.cmbeans-alert-content .mIcon{width:8vw;height:8vw;display: block;position: absolute;top: 45px;right: -35px;cursor: pointer;}
+.cmbeans-alert-content .mIcon:before{width:8vw;height:8vw;background-position:-34.1vw -77.9vw;}
 .cmbeans-alert-content-text{height: 14vw;line-height: 14vw;text-align: center;width: 100%;font-size: 4vw;color: #333333;}
 .cmbeans-alert-content-bean{width: 100%;height: 7.6vw;line-height: 7.6vw;box-sizing: border-box;display: flex;flex-direction: column;align-items: center;}
 .cmbeans-alert-content-bean .cmbeans-alert-icon{width: 9.2vw;height: 7.6vw;display: block;float: left;}

src/main/resources/static/css/base/base.pc.css

@@ -349,7 +349,11 @@ iframe{width:320px !important;height: 280px !important}
 .empty a{color:#E15616;}
 
 /*采美豆弹窗样式*/
-.cmbeans-alert-box{width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;flex-direction: column;position: fixed;left: 0;top: 0;background: rgba(51,51,51,0.5);z-index: 99999;}
+.cmbeans-alert-box{width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;flex-direction: column;position: fixed;left: 0;top: 0;background: rgba(51,51,51,0.7);z-index: 99999;}
+.cmbeans-alert-image{width: 404px;height: 342px;position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: auto;box-sizing: border-box;}
+.cmbeans-alert-image img{width: 404px;height: 342px;display: block;}
+.cmbeans-alert-image .icon{width:30px;height:30px;display: block;position: absolute;top: 45px;right: -35px;cursor: pointer;}
+.cmbeans-alert-image .icon:before{width:33px;height:33px;background-position:-197px -550px}
 .cmbeans-alert-content{width: 310px;height: 399px;position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: auto;box-sizing: border-box;padding-top: 238px;background-size: cover;}
 .cmbeans-alert-content .icon{width:30px;height:30px;display: block;position: absolute;top: 45px;right: -35px;cursor: pointer;}
 .cmbeans-alert-content .icon:before{width:33px;height:33px;background-position:-197px -550px}

src/main/resources/static/js/shopping/confirm.js

@@ -76,6 +76,7 @@ var shoppingConfirm = new Vue({
         userBeans:0,
         freightBeansMoney:0,
         freightMoney:0,
+        deductionBeans:0,
         hanldUserBeans:0,
         submitLoading: false,
     },
@@ -140,7 +141,7 @@ var shoppingConfirm = new Vue({
                     _self.payInfo.orderShouldPayFee = _self.totalPrice + _self.payInfo.freight;
                     switch (_self.payInfo.freePostFlag) {
                         case 1:
-                            if( _self.userBeans >= r.data.freight*100 ){
+                            if( _self.userBeans > 0 ){
                                 _self.freightBeansMoney = r.data.freight;
                                 _self.freightMoney = r.data.freight;
                                 _self.isBeansShow = true;
@@ -149,18 +150,29 @@ var shoppingConfirm = new Vue({
                                 _self.balance.isFreight = false;
                                 _self.isBeansShow = false;
                             }
+                            if(r.data.userBeans >= _self.freightBeansMoney*100){
+                                _self.deductionBeans = _self.freightBeansMoney*100
+                            }else{
+                                _self.deductionBeans = _self.userBeans
+                            }
                             _self.changeDeductibleFreight();
                             break;
                         case -1:
-                            if( _self.userBeans >= 3000 ){
+                            if( _self.userBeans > 0 ){
                                 _self.freightMoney = 30;
                                 _self.freightBeansMoney = 30;
                                 _self.isBeansShow = true;
+                                console.log('freightBeansMoney',_self.freightBeansMoney)
                             }else{
                                 _self.freightBeansMoney = 0;
                                 _self.balance.isFreight = false;
                                 _self.isBeansShow = false;
                             }
+                            if(r.data.userBeans >= _self.freightBeansMoney*100){
+                                _self.deductionBeans = _self.freightBeansMoney*100
+                            }else{
+                                _self.deductionBeans = _self.userBeans
+                            }
                             _self.changeDeductibleFreight();
                             break;
                     }
@@ -432,9 +444,9 @@ var shoppingConfirm = new Vue({
             var _self = this;
             var total = _self.totalPrice + _self.payInfo.freight;
             if(_self.balance.isFreight){
-                _self.hanldUserBeans = _self.freightBeansMoney*100;
                 if(_self.payInfo.freePostFlag == 1){
-                    if( _self.userBeans >= _self.payInfo.freight*100 ){
+                    _self.hanldUserBeans = _self.freightBeansMoney*100;
+                    if( _self.userBeans > 0 ){
                         if(_self.balance.flag) {// 勾选了余额抵扣
                             if(_self.balance.userMoney>=total){ // 全部抵扣
                                 _self.payInfo.orderShouldPayFee = 0;
@@ -449,6 +461,9 @@ var shoppingConfirm = new Vue({
                             _self.payInfo.orderShouldPayFee = (_self.totalPrice*100 + _self.payInfo.freight*100 - _self.freightBeansMoney*100)/100;
                         }
                     }
+                }else if(_self.payInfo.freePostFlag == -1){
+                    _self.hanldUserBeans = _self.freightBeansMoney*100;
+                    _self.payInfo.orderShouldPayFee = _self.totalPrice ;
                 }else{
                     _self.hanldUserBeans = 0;
                     _self.payInfo.orderShouldPayFee = _self.totalPrice ;
@@ -550,6 +565,7 @@ var shoppingConfirm = new Vue({
             OrderApi.ConfirmOrder({'params':JSON.stringify(params)},function (r) {
                 if(r.code === 0){
                     var _data = r.data;
+                    debugger
                     if(Number(_data.code) === 1){//余额抵扣全部订单金额
                         var data = { payableAmount: _self.deductMoney };
                         CAIMEI.Storage.removeItem('confirmOrderInfo');

src/main/resources/templates/shopping/confirm.html

@@ -299,7 +299,7 @@
             <p v-if="balance.deductMoney>0">抵扣账户余额: <span><em>- ¥{{balance.deductMoney | NumFormat}}</em></span></p>
             <p>总价: <span><em>¥{{payInfo.orderShouldPayFee | NumFormat}}</em></span></p>
             <p class="pis" v-if="isBeansShow">
-                可用{{ freightMoney*100 }}采美豆抵用{{ freightMoney }}元运费
+                可用{{ deductionBeans }}采美豆抵用{{ freightMoney }}元运费
                 <span>
                     <label class="check">
                         <input v-model="balance.isFreight" name="useBalance" type="checkbox" @change="changeDeductibleFreight()">

src/main/resources/templates/user-center/dashboard.html

@@ -163,23 +163,31 @@
         </div>
         <!-- 采美豆弹窗 -->
         <div class="cmbeans-alert-box" v-if="isShowBeansAlet">
-            <div class="cmbeans-alert-content" :style="{'background-image': 'url('+bgImagePath+')'}">
-                <div class="cmbeans-alert-content-text">恭喜您获得采美豆！</div>
-                <div class="cmbeans-alert-content-bean">
-                    <div class="cmbeans-alert-main">
-                        <img v-if="isPC" class="cmbeans-alert-icon" src="/img/account/bean-icon@3x.png" mode="">
-                        <img v-else class="cmbeans-alert-icon" src="/img/account/bean-icon-h5@3x.png" mode="">
-                        <div class="cmbeans-alert-text">
-                            <span class="icon-add">+</span>
-                            <span class="icon-text">{{ beanNumber }}</span>
+            <template v-if="beansType == 12">
+                <div class="cmbeans-alert-image">
+                    <img src="/img/account/icon-beans-12@2x.png" alt="">
+                    <i class="icon mIcon" @click.stop="handleClickCancel"></i>
+                </div>
+            </template>
+            <template v-else>
+                <div class="cmbeans-alert-content" :style="{'background-image': 'url('+bgImagePath+')'}">
+                    <div class="cmbeans-alert-content-text">恭喜您获得采美豆！</div>
+                    <div class="cmbeans-alert-content-bean">
+                        <div class="cmbeans-alert-main">
+                            <img v-if="isPC" class="cmbeans-alert-icon" src="/img/account/bean-icon@3x.png" mode="">
+                            <img v-else class="cmbeans-alert-icon" src="/img/account/bean-icon-h5@3x.png" mode="">
+                            <div class="cmbeans-alert-text">
+                                <span class="icon-add">+</span>
+                                <span class="icon-text">{{ beanNumber }}</span>
+                            </div>
                         </div>
                     </div>
+                    <div class="cmbeans-alert-content-tips">
+                        <div class="tips">采美豆可抵扣运费</div>
+                    </div>
+                    <i class="icon mIcon" @click.stop="handleClickCancel"></i>
                 </div>
-                <div class="cmbeans-alert-content-tips">
-                    <div class="tips">采美豆可抵扣运费</div>
-                </div>
-                <i class="icon mIcon" @click.stop="handleClickCancel"></i>
-            </div>
+            </template>
         </div>
     </div>
     <!--loading-->