页面调整

src/components/course/courseprice-form.vue

@@ -19,6 +19,7 @@
   .courseMainTbale td {
     padding: 0 3px;
   }
+
 </style>
 <template>
   <q-dialog v-model="persistent" persistent content-class="bg-grey-1" transition-show="scale" transition-hide="scale">
@@ -31,55 +32,21 @@
           <span class="course_Line"></span>
           基础价格设置
         </div>
-        <div>
-          <table style="margin-left:10px;">
-            <tr>
-              <td style="width:110px;text-align:right;">
-                <el-select v-model="priceObj.courseObj.SellPriceType" placeholder="请选择报价类型">
-    <el-option
-      v-for="item in PriceTypeList"
-      :key="item.value"
-      :label="item.label"
-      :value="item.value">
-    </el-option>
-  </el-select>
-              </td>
-              <td colspan="2">
-                <q-input filled stack-label maxlength="8" style="padding-bottom:0;width:390px;margin-left:10px;" dense
-                  v-model="priceObj.courseObj.SellPrice" ref="SellPrice" label="卖价"
-                  @keyup.native="checkPrice(priceObj.courseObj, 'SellPrice')" :rules="[val => !!val || '请填写卖价']" />
-              </td>
-            </tr>
-          </table>
-        </div>
-
-        <div class="text-caption q-mb-lg q-mt-lg text-grey-6 row wrap">
-          <span class="course_Line"></span>
-          其他价格设置
-        </div>
-        <div>
-          <table style="margin-left:10px;">
-            <tr>
-              <td style="width:110px;text-align:right;">
-                教材费
-              </td>
-              <td colspan="2">
-                <q-input filled stack-label maxlength="8" style="padding-bottom:0;width:390px;margin-left:10px;" dense
-                  v-model="priceObj.courseObj.TextbookFee" ref="TextbookFee" label="价格"
-                  @keyup.native="checkPrice(priceObj.courseObj, 'TextbookFee')" :rules="[val => !!val || '请填写教材费价格']" />
-              </td>
-            </tr>
-            <tr>
-              <td style="width:110px;text-align:right;">
-                课件费
-              </td>
-              <td colspan="2">
-                <q-input filled stack-label maxlength="8" style="padding-bottom:0;width:390px;margin-left:10px;" dense
-                  v-model="priceObj.courseObj.CoursewareFee" ref="CoursewareFee" label="价格"
-                  @keyup.native="checkPrice(priceObj.courseObj, 'CoursewareFee')" :rules="[val => !!val || '请填写课件费价格']" />
-              </td>
-            </tr>
-          </table>
+        <div class="row">
+          <q-select filled stack-label dense class="col-2 q-pr-lg q-pb-lg" v-model="priceObj.courseObj.SellPriceType"
+            :options="PriceTypeList" emit-value map-options option-value="Id" option-label="Name" label="价格类型" />
+          <q-input filled stack-label dense class="col-2 q-pr-lg q-pb-lg" maxlength="8"
+            v-model="priceObj.courseObj.SellPrice" ref="SellPrice"
+            :label="priceObj.courseObj.SellPriceType==1?'课程总价':'课时单价'"
+            @keyup.native="checkPrice(priceObj.courseObj, 'SellPrice')" :rules="[val => !!val || '请填写卖价']" />
+          <template v-if="priceObj.courseObj.SellPriceType==1">
+            <q-input filled stack-label class="col-2 q-pr-lg q-pb-lg" maxlength="8" dense
+              v-model="priceObj.courseObj.TextbookFee" ref="TextbookFee" label="教材费"
+              @keyup.native="checkPrice(priceObj.courseObj, 'TextbookFee')" />
+            <q-input filled stack-label class="col-2 q-pr-lg q-pb-lg" maxlength="8" dense
+              v-model="priceObj.courseObj.CoursewareFee" ref="CoursewareFee" label="课件费"
+              @keyup.native="checkPrice(priceObj.courseObj, 'CoursewareFee')" />
+          </template>
         </div>
         <div class="text-caption q-mb-lg q-mt-lg text-grey-6" v-if="false">
           <span class="course_Line"></span>
@@ -122,7 +89,7 @@
         <div class="text-caption q-mb-lg q-mt-lg text-grey-6 row wrap" style="align-items:center;">
           <div>
             <span class="course_Line"></span>
-            返佣
+            返佣设置
           </div>
           <!--只保留内部介绍返佣和学员介绍返佣。-->
           <q-select style="width:200px;margin-left:35px;" filled dense v-model="priceObj.courseObj.CommissionReType"
@@ -130,8 +97,7 @@
         </div>
         <table style="border-collapse: collapse;width:100%;" class="coursePrice_table courseMainTbale">
           <tr style="height:40px;">
-            <th>同行
-            </th>
+            <th>返佣类型</th>
             <th>
               首报名返佣比例
             </th>
@@ -400,12 +366,12 @@
     },
     data() {
       return {
-        PriceTypeList:[{
-          value: 1,
-          label: '课程总价'
+        PriceTypeList: [{
+          Id: 1,
+          Name: '课程总价'
         }, {
-          value: 2,
-          label: '课时单价'
+          Id: 2,
+          Name: '课时单价'
         }],
         persistent: true,
         optionTitle: "",
@@ -416,9 +382,9 @@
             CourseId: 0, //课程编号
             OriginalPrice: 0, //原价
             SellPrice: 0, //售价
-            SellPriceType:1,//价格类型：基础售价1/课时售价2
-            TextbookFee:0,//教材费
-            CoursewareFee:0,//课件费
+            SellPriceType: 1, //价格类型：基础售价1/课时售价2
+            TextbookFee: 0, //教材费
+            CoursewareFee: 0, //课件费
             CommissionReType: 1, //返佣类型(1比例返佣,2-固定金额返佣)
             B2CRatio: 0, //直客首次报名优惠比例
             B2CReNewRatio: 0, //直客续费优惠比例
@@ -654,7 +620,7 @@
         var Count = ''
         var currentPrice = Number(100 - this.priceObj.courseObj.B2CRatio) * this.priceObj.courseObj.SellPrice / 100;
         var currrntXufei = Number(100 - this.priceObj.courseObj.B2CReNewRatio) * this.priceObj.courseObj.SellPrice /
-        100;
+          100;
         if (type == 3) {
           if (this.priceObj.courseObj.B2BRebateRatio) {
             let num = currentPrice * Number(this.priceObj.courseObj.B2BRebateRatio) / 100;
@@ -728,4 +694,5 @@
       }
     }
   };
-</script>
\ No newline at end of file
+
+</script>