1

src/components/course/courseprice-form.vue

 <template>
   <q-dialog v-model="persistent" persistent content-class="bg-grey-1" transition-show="scale" transition-hide="scale">
-    <q-card style="width: 850px;max-width:950px;">
+    <q-card style="width: 600px;max-width:600px;">
       <q-card-section>
         <div class="text-h6">设置课程价格</div>
       </q-card-section>
       <q-card-section class="q-pt-none scroll" style="max-height: 70vh">
         <div class="text-caption q-mb-lg text-grey-6">基础价格设置</div>
-        <div class="row wrap">
-          <div class="col-6">
-            <q-input filled stack-label maxlength="8" :dense="false" v-model="priceObj.courseObj.SellPrice"
-              ref="SellPrice" class="col-6 q-pr-lg q-pb-lg" label="卖价"
+        <div>
+          <table style="margin-left:10px;">
+            <tr>
+              <td style="width:58px;text-align:right;">
+                卖价
+              </td>
+              <td colspan="2">
+                <q-input filled stack-label maxlength="8" style="padding-bottom:0;width:390px;" :dense="false" v-model="priceObj.courseObj.SellPrice"
+                  ref="SellPrice" label="卖价"
                   @keyup.native="checkPrice(priceObj.courseObj, 'SellPrice')" :rules="[val => !!val || '请填写卖价']" />
+              </td>
+            </tr>
+          </table>
         </div>
-        </div>
-        <div class="text-caption q-mb-lg text-grey-6">优惠</div>
-        <table>
+        <div class="text-caption q-mb-lg q-mt-lg text-grey-6">优惠</div>
+        <table style="margin-left:10px;">
           <tr>
             <th>
               优惠
@@ -22,48 +29,67 @@
             <th>
               首次报名优惠
             </th>
+            <th>首次优惠价</th>
             <th>
               续费报名优惠
             </th>
+            <th>续费优惠价</th>
           </tr>
           <tr>
-            <td>
+            <td style="width:70px;">
               直客优惠
             </td>
             <td>
               <q-input filled stack-label :dense="false" v-model="priceObj.courseObj.B2CRatio" ref="B2CRatio"
-                @keyup.native="checkPrice(priceObj.courseObj, 'B2CRatio')" suffix="%" />
+                @keyup.native="checkPrice(priceObj.courseObj, 'B2CRatio'),getPrePrice(1)" suffix="%" />
+            </td>
+            <td style="width:100px;text-align:center;">
+              {{getPrePrice(1)}}
             </td>
             <td>
               <q-input filled stack-label :dense="false" v-model="priceObj.courseObj.B2CReNewRatio" ref="B2CReNewRatio"
-                @keyup.native="checkPrice(priceObj.courseObj, 'B2CReNewRatio')" suffix="%" />
+                @keyup.native="checkPrice(priceObj.courseObj, 'B2CReNewRatio'),getPrePrice(2)" suffix="%" />
+            </td>
+            <td style="width:100px;text-align:center;">
+              {{getPrePrice(2)}}
             </td>
           </tr>
         </table>
-
-        <div class="text-caption q-mb-lg text-grey-6">返佣</div>
-        <table>
+        <div class="text-caption q-mb-lg q-mt-lg text-grey-6">返佣</div>
+        <table style="margin-left:10px;">
           <tr>
             <th>同行
             </th>
             <th>
               首次报名返佣比例
             </th>
+            <th>
+              首报返佣值
+            </th>
             <th>
               续费报名返佣比例
             </th>
+            <th>
+              续费返佣值
+            </th>
           </tr>
           <tr>
-            <td>
+            <td style="width:70px;">
               一般同行
             </td>
             <td>
               <q-input filled stack-label :dense="false" v-model="priceObj.courseObj.B2BRebateRatio"
-                ref="B2BRebateRatio" @keyup.native="checkPrice(priceObj.courseObj, 'B2BRebateRatio')" suffix="%" />
+                ref="B2BRebateRatio" @keyup.native="checkPrice(priceObj.courseObj, 'B2BRebateRatio'),getShouBAO(3)" suffix="%" />
+            </td>
+            <td style="text-align:center;width:100px;">
+              {{getShouBAO(3)}}
             </td>
             <td>
               <q-input filled stack-label :dense="false" v-model="priceObj.courseObj.B2BReNewRatio" ref="B2BReNewRatio"
-                @keyup.native="checkPrice(priceObj.courseObj, 'B2BReNewRatio')" suffix="%" />
+                @keyup.native="checkPrice(priceObj.courseObj, 'B2BReNewRatio'),getShouBAO(4)" suffix="%" />
+            </td>
+            <td style="text-align:center;width:100px;">
+              {{getShouBAO(4)}}
             </td>
           </tr>
           <tr>
@@ -72,12 +98,18 @@
             </td>
             <td>
               <q-input filled stack-label :dense="false" v-model="priceObj.courseObj.SchoolRebateRatio"
-                ref="SchoolRebateRatio" @keyup.native="checkPrice(priceObj.courseObj, 'SchoolRebateRatio')"
+                ref="SchoolRebateRatio" @keyup.native="checkPrice(priceObj.courseObj, 'SchoolRebateRatio'),getShouBAO(5)"
                 suffix="%" />
             </td>
+            <td style="text-align:center;">
+              {{getShouBAO(5)}}
+            </td>
             <td>
               <q-input filled stack-label :dense="false" v-model="priceObj.courseObj.SchoolReNewRatio"
-                ref="SchoolReNewRatio" @keyup.native="checkPrice(priceObj.courseObj, 'SchoolReNewRatio')" suffix="%" />
+                ref="SchoolReNewRatio" @keyup.native="checkPrice(priceObj.courseObj, 'SchoolReNewRatio'),getShouBAO(6)" suffix="%" />
+            </td>
+            <td style="text-align:center;">
+              {{getShouBAO(6)}}
             </td>
           </tr>
           <tr>
@@ -86,13 +118,19 @@
             </td>
             <td>
               <q-input filled stack-label :dense="false" v-model="priceObj.courseObj.TransIntroductceRatio"
-                ref="TransIntroductceRatio" @keyup.native="checkPrice(priceObj.courseObj, 'TransIntroductceRatio')"
+                ref="TransIntroductceRatio" @keyup.native="checkPrice(priceObj.courseObj, 'TransIntroductceRatio'),getShouBAO(7)"
                 suffix="%" />
             </td>
+            <td style="text-align:center">
+              {{getShouBAO(7)}}
+            </td>
             <td>
               <q-input filled stack-label :dense="false" v-model="priceObj.courseObj.TransIntroductceReNewRatio"
                 ref="TransIntroductceReNewRatio"
-                @keyup.native="checkPrice(priceObj.courseObj, 'TransIntroductceReNewRatio')" suffix="%" />
+                @keyup.native="checkPrice(priceObj.courseObj, 'TransIntroductceReNewRatio'),getShouBAO(8)" suffix="%" />
+            </td>
+            <td style="text-align:center">
+              {{getShouBAO(8)}}
             </td>
           </tr>
           <tr>
@@ -101,13 +139,19 @@
             </td>
             <td>
               <q-input filled stack-label :dense="false" v-model="priceObj.courseObj.InnerRecommendRatio"
-                ref="InnerRecommendRatio" @keyup.native="checkPrice(priceObj.courseObj, 'InnerRecommendRatio')"
+                ref="InnerRecommendRatio" @keyup.native="checkPrice(priceObj.courseObj, 'InnerRecommendRatio'),getShouBAO(9)"
                 suffix="%" />
             </td>
+            <td style="text-align:center">
+              {{getShouBAO(9)}}
+            </td>
             <td>
               <q-input filled stack-label :dense="false" v-model="priceObj.courseObj.InnerRecommendReNewRatio"
                 ref="InnerRecommendReNewRatio"
-                @keyup.native="checkPrice(priceObj.courseObj, 'InnerRecommendReNewRatio')" suffix="%" />
+                @keyup.native="checkPrice(priceObj.courseObj, 'InnerRecommendReNewRatio'),getShouBAO(10)" suffix="%" />
+            </td>
+            <td style="text-align:center">
+              {{getShouBAO(10)}}
             </td>
           </tr>
         </table>
@@ -278,7 +322,87 @@
               this.saveCourseLoading = false;
             });
         }
+      },
+      //获取首次报名优惠
+      getPrePrice(type){
+        //首次优惠
+        var Count = ''
+        if(type==1){
+          if(this.priceObj.courseObj.B2CRatio){
+            let num = parseInt(100-this.priceObj.courseObj.B2CRatio)/100;
+            Count = (num*this.priceObj.courseObj.SellPrice).toFixed(2);
+          }
+        }
+        if(type==2){
+          if(this.priceObj.courseObj.B2CReNewRatio){
+            let num = parseInt(100-this.priceObj.courseObj.B2CReNewRatio)/100;
+            Count = (num*this.priceObj.courseObj.SellPrice).toFixed(2);
+          }
+        }
+        return Count;
+      },
+      //获取首报返佣比例
+      getShouBAO(type){
+        //首次优惠
+        var Count = ''
+        if(type==3){
+          if(this.priceObj.courseObj.B2BRebateRatio){
+            let num = parseInt(100-this.priceObj.courseObj.B2CRatio-this.priceObj.courseObj.B2BRebateRatio)/100;
+            Count = (num*this.priceObj.courseObj.SellPrice).toFixed(2);
+            return Count;
+          }
+        }
+        if(type==4){
+          if(this.priceObj.courseObj.B2BReNewRatio){
+            let num = parseInt(100-this.priceObj.courseObj.B2CReNewRatio-this.priceObj.courseObj.B2BReNewRatio)/100;
+            Count = (num*this.priceObj.courseObj.SellPrice).toFixed(2);
+            return Count;
+          }
+        }
+        if(type==5){
+          if(this.priceObj.courseObj.SchoolRebateRatio){
+            let num = parseInt(100-this.priceObj.courseObj.B2CRatio-this.priceObj.courseObj.SchoolRebateRatio)/100;
+            Count = (num*this.priceObj.courseObj.SellPrice).toFixed(2);
+            return Count;
+          }
+        }
+        if(type==6){
+          if(this.priceObj.courseObj.SchoolReNewRatio){
+            let num = parseInt(100-this.priceObj.courseObj.B2CReNewRatio-this.priceObj.courseObj.SchoolReNewRatio)/100;
+            Count = (num*this.priceObj.courseObj.SellPrice).toFixed(2);
+            return Count;
+          }
+        }
+        if(type==7){
+          if(this.priceObj.courseObj.TransIntroductceRatio){
+            let num = parseInt(100-this.priceObj.courseObj.B2CRatio-this.priceObj.courseObj.TransIntroductceRatio)/100;
+            Count = (num*this.priceObj.courseObj.SellPrice).toFixed(2);
+            return Count;
+          }
+        }
+        if(type==8){
+          if(this.priceObj.courseObj.TransIntroductceReNewRatio){
+            let num = parseInt(100-this.priceObj.courseObj.B2CReNewRatio-this.priceObj.courseObj.TransIntroductceReNewRatio)/100;
+            Count = (num*this.priceObj.courseObj.SellPrice).toFixed(2);
+            return Count;
+          }
+        }
+        if(type==9){
+          if(this.priceObj.courseObj.InnerRecommendRatio){
+            let num = parseInt(100-this.priceObj.courseObj.B2CRatio-this.priceObj.courseObj.InnerRecommendRatio)/100;
+            Count = (num*this.priceObj.courseObj.SellPrice).toFixed(2);
+            return Count;
+          }
+        }
+        if(type==10){
+          if(this.priceObj.courseObj.InnerRecommendReNewRatio){
+            let num = parseInt(100-this.priceObj.courseObj.B2CReNewRatio-this.priceObj.courseObj.InnerRecommendReNewRatio)/100;
+            Count = (num*this.priceObj.courseObj.SellPrice).toFixed(2);
+            return Count;
+          }
+        }
       }
     }
   };
+
 </script>