增加景点选择

src/components/newTravelmanager/TravelGroupControl/TravelPrice.vue

@@ -185,7 +185,11 @@
     max-height: 400px;
     overflow: auto;
   }
-
+  ._TravelPricePopover .ScenicDiv{
+    width: 450px;
+    max-height: 400px;
+    overflow: auto;
+  }
   ._TravelPricePopover table {
     padding: 10px 0 0 20px;
     background-color: #ededed;
@@ -664,19 +668,50 @@
                       <template slot="prepend">集合标识</template>
                     </el-input>
                   </el-form-item>
-                  <el-form-item>
-                    <span class="TP_Sendprepend" style="margin-left:0;width:120px;">可退景点</span>
-                    <el-select class="w180" v-model="priceData.ChooseBackScenicArr" multiple >
-                      <el-option v-for="item in priceData.scenicBackList" :key="item.ID" :label="item.Name" :value="item.ID">
-                      </el-option>
-                    </el-select>
-                  </el-form-item>
-                  <el-form-item>
+                </div>
+                <div class="clearfix">
+                  <div class="leftSetInfo">
+                    <span class="TPbaseSet"></span>
+                    <span class="TPsecondTitle">可退景点</span>
+                  </div>
+                  <div class="TPright clearfix">
+                    <el-popover popper-class="_TravelPricePopover" trigger="click">
+                      <div>
+                        <div class="ScenicDiv">
+                          <table width="100%" border="0" cellspacing="0" cellpadding="0">
+                            <tr>
+                              <td class="_color_666">选择</td>
+                              <td class="_color_666">景点名称</td>
+                              <td class="_color_666">退款金额</td>
+                            </tr>
+                            <tr v-for="item in priceData.ScenicBackList">
+                              <td>
+                                <el-checkbox :checked="item.IsChecked" @change="getScenic(item)"></el-checkbox>
+                              </td>
+                              <td>
+                                {{item.Name}}
+                              </td>
+                              <td>
+                                <el-input class="w80" @keyup.native="checkPrice(item,'RefundMoney')"
+                                  v-model="item.RefundMoney"></el-input>
+                              </td>
+                            </tr>
+                          </table>
+                        </div>
+                      </div>
+                      <div slot="reference" class="SimulateDrop-box">
+                        <span class="SD_flight" v-for="subItem in ScenicList">{{subItem.Name}}</span>
+                        <i class="iconfont icon-arrow-down SimulaDrop"></i>
+                      </div>
+                    </el-popover>
+                    <el-form-item style="margin-top:1px;">
                       <el-input placeholder="请输入" class="w460 ComSeat" v-model="priceData.AirportService">
                         <template slot="prepend">机场服务</template>
                       </el-input>
                     </el-form-item>
                   </div>
+                </div>
+
                 <div class="clearfix">
                   <div class="leftSetInfo">
                     <span class="TPbaseSet"></span>
@@ -973,6 +1008,8 @@
         offerList: [],
         selectFilghtList: [],
         FinfoList: [],
+        //选中景点
+        ScenicList:[],
         //下拉框默认值
         SelectDefaultValue: 0,
         SelectOtherDefault: -1,
@@ -1142,10 +1179,8 @@
                 ChooseHotelArray: [],
                 //销售清位时间
                 SaleClearOrderHour: 0,
-                //可退景点选择列表
-                chooseBackScenicArr:[],
                 //可退景点下拉列表
-                scenicBackList:[],
+                ScenicBackList:[],
               };
             }
             this.returnPriceList.push(objItem);
@@ -1538,6 +1573,20 @@
           }
         });
       },
+      //选中景点选择框
+      getScenic(item){
+        item.IsChecked=!item.IsChecked;
+        this.initScenic();
+      },
+      //初始化景点
+      initScenic(){
+        this.ScenicList=[];
+        this.priceData.ScenicBackList.forEach(x=>{
+          if(x.IsChecked){
+            this.ScenicList.push(x);
+          }
+        })
+      },
       goUrl(path, id) {
         this.$router.push({
           name: path,
@@ -1735,6 +1784,7 @@
               x["Checked"] = true;
               this.chooseDay = this.priceData.StartDate;
               this.initFlightData();
+              this.initScenic();
             } else {
               x["Checked"] = false;
             }