地区设置优化功能开发

src/components/WebSet/WebSiteArea.vue

@@ -7,7 +7,26 @@
     color: #409eff;
     text-decoration: underline
   }
-
+.addlist {
+  position: absolute;
+  right: 158px;
+  top: 6px;
+  cursor: pointer;
+  color: #E95252;
+  width: 30px;
+  height: 30px;
+  display: inline-block;
+  text-align: center;
+  line-height: 30px;
+  border-radius: 50%;
+  font-size: 22px;
+}
+.relative {
+  position: relative;
+}
+.flex {
+  display: flex;
+}
 </style>
 <template>
   <!--契约管理-->
@@ -16,9 +35,22 @@
       <ul>
         <li>
           <label>名称</label>
-          <el-input v-model="msg.Name" :placeholder="$t('system.ph_in')" @keyup.native.enter="getData" class="w210">
+          <el-input v-model="msg.CategoryName" :placeholder="$t('system.ph_in')" @keyup.native.enter="getData" class="w210">
           </el-input>
         </li>
+        <li>
+          <label>层级</label>
+              <el-select v-model="msg.Level" placeholder="请选择">
+                <el-option label="请选择" :value="0"></el-option>
+                <el-option label="洲" :value="1"></el-option>
+                <el-option label="国家" :value="2"></el-option>
+                <el-option label="地区/省市" :value="3"></el-option>
+              </el-select>
+        </li>
+        <li>
+          <label>启用状态</label>
+          <el-switch v-model="msg.Enable"></el-switch>
+        </li>
         <li>
           <input type="button" class="hollowFixedBtn" :value="$t('pub.searchBtn')"
             @click="resetPageIndex(),getData()" />
@@ -52,7 +84,7 @@
       </el-pagination>
     </div>
 
-    <el-dialog title="地区设置" :visible.sync="outerVisible" center width="400px">
+    <el-dialog title="地区设置" :visible.sync="outerVisible" center width="1000px">
       <el-form :model="addMsg" ref="addMsg" label-width="120px">
         <el-row>
           <el-col :span="24">
@@ -76,6 +108,46 @@
                 </el-option>
               </el-select>
             </el-form-item>
+            <el-form-item label="目的地信息">
+              <div class="relative">
+                <div>目的地信息</div>
+              <i class="el-icon-circle-plus addlist" @click="clickArea(0, 1)"></i>
+              </div>
+              <div class="relative" v-for="(item, index) in addMsg.areaList" :key="index">
+                <span>{{item.Name}}</span>
+                <i class="el-icon-delete addlist" @click="clickArea(index)"></i>
+              </div>
+            </el-form-item>
+            <el-form-item label="介绍">
+              <el-input v-model="addMsg.Introduction" />
+            </el-form-item>
+            <el-form-item label="时区">
+              <el-input v-model="addMsg.TimeZones" />
+            </el-form-item>
+            <el-form-item label="币种">
+            <el-select  filterable  v-model='addMsg.CurrencyId' placeholder="选择币种" class=" _border_b_1">
+                <el-option v-for='item in coinGetList'
+                    :label='item.Name'
+                    :value='item.ID'
+                    :key='item.ID'>
+                </el-option>
+            </el-select>
+            </el-form-item>
+            <el-form-item label="电压">
+              <el-input v-model="addMsg.Voltage" />
+            </el-form-item>
+            <el-form-item label="最佳旅行时间">
+              <div class="relative" v-for="(item, index) in addMsg.BestTravelTimeList" :key="index">
+                <div class="flex"><span>月份说明</span><el-input style="width: 220px" v-model="item.Month" /></div>
+                <div class=flex><span>理由说明</span><el-input style="width: 620px" v-model="item.Description" /></div>
+                <i v-if="index == 0" class="el-icon-circle-plus addlist" @click="clickTime(index, 1)"></i>
+                <i v-else class="el-icon-delete addlist" @click="clickTime(index)"></i>
+              </div>
+            </el-form-item>
+            <el-form-item label="图片">
+              <!-- <el-input v-model="addMsg.ImageList" /> -->
+              <uploadImg ref="uploadImg"></uploadImg>
+            </el-form-item>
           </el-col>
         </el-row>
       </el-form>
@@ -84,13 +156,33 @@
         <button class="hollowFixedBtn" @click="outerVisible = false">{{$t('pub.cancelBtn')}}</button>
       </div>
     </el-dialog>
+    <el-dialog title="选择目的地" :visible.sync="areaVisible" @close="addArea" center width="600px">
+      <area-select @change="changeSelectArea"></area-select>
+    </el-dialog>
   </div>
 </template>
 <script>
+import AreaSelect from '../../pubComponents/areaSelect' 
+import uploadImg from '../../pubComponents/uploadImg'
   export default {
+    components: {
+      AreaSelect,
+      uploadImg
+    },
     data() {
       return {
+            //币种下拉
+            coinGetList:[],
+        areaVisible: false,
         loading: false,
+        areaItem:{
+          ID: '',
+          Name: ''
+        },
+        timeItem: {
+          Month: '',
+          Description: ''
+        },
         msg: {
           Name: '', //名称
           pageSize: 15,
@@ -106,12 +198,18 @@
           Level: 0, //等级
           ParentId: 0, //父节点编号
           AreaName: '', //名称
+          BestTravelTimeList: [{
+            Month: '',
+            Description: ''
+          }],
+          areaList: [],
         },
         AreaList: [], //地区列表
       }
     },
     mounted() {
       this.getData();
+      this.financeinfo_post_GetList()
     },
     methods: {
       getAreaList() {
@@ -209,6 +307,9 @@
       },
       //新增、修改广告
       submitForm(addMsg) {
+        const imageList = this.$refs.uploadImg.ImageList
+        console.log('submitForm', this.addMsg, imageList)
+        this.addMsg.ImageList = imageList
         this.apipost(
           "ws_post_SetArea", this.addMsg,
           res => {
@@ -224,6 +325,39 @@
           err => {}
         );
       },
+      //获取币种
+        financeinfo_post_GetList(){
+            this.apipost('financeinfo_post_GetList',{Name:''}, res => {
+                if(res.data.resultCode == 1) {
+                    this.coinGetList = res.data.data;
+                }
+            }, err => {})
+        },
+      clickArea(index, type) {
+        if (type) {
+          this.areaVisible = true
+        } else {
+          this.addMsg.areaList.splice(index, 1)
+        }
+      },
+      clickTime(index, type) {
+        if (type) {
+          this.addMsg.BestTravelTimeList.push(JSON.parse(JSON.stringify(this.timeItem)))
+        } else {
+          this.addMsg.BestTravelTimeList.splice(index, 1)
+        }
+      },
+      addArea() {
+        if(this.areaInfo) {
+          this.addMsg.areaList.push(this.areaInfo)
+        }
+        console.log('addArea', this.areaInfo, this.addMsg)
+        this.areaInfo = null
+      },
+      changeSelectArea(area) {
+        console.log('changeSelectArea', area)
+        this.areaInfo = area
+      }
     }
   }
 

src/pubComponents/areaSelect.vue

+<template>
+<div>
+<el-select placeholder="国家" filterable v-model="addMsg.Country" class='multiple_input w100'
+                @change="GetSubAreaList(addMsg.Country, 1), addMsg.Province = '', addMsg.City = '', addMsg.District = ''">
+                <el-option v-for="childItem in CountryList" :key="childItem.ID" :label="childItem.Name"
+                  :value="childItem.ID">
+                </el-option>
+              </el-select>
+              <el-select placeholder="省" filterable class='multiple_input w100' v-model="addMsg.Province"
+                @change="GetSubAreaList(addMsg.Province, 2), addMsg.City = '', addMsg.District = ''">
+                <el-option v-for="childItem in ProvinceList" :key="childItem.ID" :label="childItem.Name"
+                  :value="childItem.ID">
+                </el-option>
+              </el-select>
+              <el-select placeholder="市" filterable @change="emitChange(addMsg.City, 3)"
+                class='multiple_input w100' v-model="addMsg.City">
+                <el-option v-for="childItem in CityList" :key="childItem.ID" :label="childItem.Name"
+                  :value="childItem.ID">
+                </el-option>
+              </el-select>
+</div>
+</template>
+<style scoped>
+
+</style>
+<script>
+export default {
+    data() {
+        return {
+          addMsg: {},
+          CountryList: [],
+          ProvinceList: [],
+          CityList: [],
+          district: [],  
+        }
+    },
+    mounted() {
+      this.GetCounrty();
+    },
+    methods: {
+      //获取国家
+      GetCounrty() {
+        this.apipost(
+          "dict_post_Destination_GetCountry", {},
+          res => {
+            this.CountryList = res.data.data;
+          },
+          err => { }
+        );
+      },
+      //获取省份和城市
+      GetSubAreaList(ID, type) {
+        let msg = {
+          Id: ID
+        };
+        if (this.addMsg.Country != 0) {
+          this.apipost(
+            "dict_post_Destination_GetChildList",
+            msg,
+            res => {
+              if (type == 1) {
+                this.ProvinceList = res.data.data;
+                this.CityList = [];
+                this.district = [];
+              } else if (type == 2) {
+                this.CityList = res.data.data;
+                this.district = [];
+              } else if (type == 3) {
+                this.district = res.data.data;
+              }
+            },
+            err => { }
+          );
+        }
+        this.emitChange(ID, type)
+      },
+      emitChange(ID, type) {
+        let info
+        if(type === 1) {
+          info = this.CountryList.find(item => item.ID === ID)
+        } else if(type === 2) {
+          info = this.ProvinceList.find(item => item.ID === ID)
+        } else {
+          info= this.CityList.find(item => item.ID === ID)
+        }
+        this.$emit('change', info)
+      }
+    }
+}
+</script>
\ No newline at end of file

src/pubComponents/uploadImg.vue

+<template>
+<div>
+          <div class="resource-list">
+            <div class="resource-imglist clearfix">
+              <div class="re-img" v-for="(item, index) in ImageList" :key="index">
+                <img v-if="!item" src="../assets/img/bg_c3@3x.png">
+                <img :src="item" :onerror='defaultImg' />
+                <div class="imgzhe">
+                  <!-- <div class="re-delte"><i @click.stop="showImg(item)" class="iconfont icon-img_cz"></i></div> -->
+                  <div class="re-delte" @click="delImg(index)"><i class="iconfont icon-xingzhuang"></i></div>
+                  <div class="re-delte" @click.stop="ExchangeImg(index, 0)" v-if="index != 0 && item">
+                    <i class="iconfont icon-zuoyi"></i>
+                  </div>
+                  <div class="re-delte" @click.stop="ExchangeImg(index, 1)"
+                    v-if="index != ImageList.length - 1 && item">
+                    <i class="iconfont icon-youyi"></i>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="add-img">
+              <div class="reimg-add">
+                <i class="iconfont icon-img_haha bigAdd"></i>
+                <div class="ad-one">
+                  <div class="re-upload">
+                    <el-upload :file-list="fileList" :http-request="UploadImage" :multiple="true"
+                      accept="image/jpeg,image/gif,image/png,image/bmp" :show-file-list="false" action="">
+                      <i class="iconfont icon-img_bdsc"></i>
+                    </el-upload>
+                  </div>
+                  <!-- 选择系统图片 -->
+                  <!-- <div class="re-find" @click="addImgOpen"><i class="iconfont icon-img_cz"></i></div> -->
+                </div>
+              </div>
+            </div>
+          </div>
+            <!-- <el-upload class="upload-demo" :http-request="UploadImage" :multiple="false"
+              accept="image/jpeg,image/gif,image/png,image/bmp" :show-file-list="false" action="">
+              <i class="iconfont icon-img_haha"></i>
+            </el-upload> -->
+</div>
+</template>
+<style>
+.addlist {
+  position: absolute;
+  right: 158px;
+  top: 6px;
+  cursor: pointer;
+  color: #E95252;
+  width: 30px;
+  height: 30px;
+  display: inline-block;
+  text-align: center;
+  line-height: 30px;
+  border-radius: 50%;
+  font-size: 22px;
+}
+
+.scenicSpotInfoManage .resourceImgAdd {
+  width: 620px;
+  margin: auto;
+}
+
+.scenicSpotInfoManage .clearfix:after {
+  content: "\0020";
+  display: block;
+  height: 0;
+  clear: both;
+}
+
+.scenicSpotInfoManage .resource-content {
+  width: 100%;
+  margin-top: 30px;
+  font-size: 12px;
+  min-width: 1200px;
+}
+
+.scenicSpotInfoManage .resource-baseinfo {
+  float: left;
+  height: auto;
+  width: 600px;
+  margin: 0 0 20px 30px;
+}
+
+.scenicSpotInfoManage .resource-imginfo {
+  float: left;
+  width: 510px;
+  margin-top: 35px;
+}
+
+.scenicSpotInfoManage .resource-lititle {
+  display: block;
+  border-left: 4px solid #e95252;
+  padding-left: 10px;
+  margin-bottom: 20px;
+}
+
+.scenicSpotInfoManage .resource-baseinfo span {
+  display: inline-block;
+}
+
+.scenicSpotInfoManage .resource-name {
+  width: 300px;
+  height: 34px;
+  background: rgba(255, 255, 255, 1);
+  border-radius: 17px;
+  outline: none;
+  border: 1px solid #d6d6d6;
+  padding-left: 10px;
+}
+
+.scenicSpotInfoManage .common-lefttit {
+  width: 80px;
+  text-align: right;
+  margin: 0 7px 0 8px;
+  display: inline-block;
+}
+
+.scenicSpotInfoManage .resource-net {
+  position: relative;
+}
+
+.scenicSpotInfoManage .resource-http {
+  position: absolute;
+  color: #999999;
+  width: 70px !important;
+  background-color: #f5f7fa;
+  border-right: 1px solid #d1d1d1;
+  height: 32px;
+  border-top-left-radius: 17px;
+  border-bottom-left-radius: 17px;
+  top: 5px;
+  left: 1px;
+  text-align: center;
+  line-height: 32px;
+  text-align: center;
+}
+
+.scenicSpotInfoManage .R1 {
+  width: 300px;
+  padding: 0 15px 0 80px;
+  transition: all 0.3s ease-in-out;
+}
+
+.scenicSpotInfoManage .areaInput {
+  width: 300px;
+  padding-right: 120px;
+}
+
+.scenicSpotInfoManage .areaInput:focus {
+  border: 1px solid #e95252;
+}
+
+.scenicSpotInfoManage .map-icon {
+  position: absolute;
+  right: 1px;
+  top: 1px;
+  line-height: 32px;
+  text-align: center;
+  border-left: 1px solid #cccccc;
+  border-top-right-radius: 17px;
+  border-bottom-right-radius: 17px;
+  padding-right: 15px;
+  padding-left: 10px;
+  cursor: pointer;
+  display: inline-block;
+  height: 32px;
+  background-color: #f5f7fa;
+}
+
+.scenicSpotInfoManage .map-icon i {
+  margin: 0 5px;
+  position: relative;
+  top: 1px;
+}
+
+.scenicSpotInfoManage .save-Btn {
+  width: 90px;
+  height: 30px;
+  background: rgba(233, 82, 82, 1);
+  border-radius: 15px;
+  color: #fff;
+  outline: none;
+  cursor: pointer;
+  margin-right: 20px;
+}
+
+.scenicSpotInfoManage .cancel-Btn,
+.save-Btn:hover {
+  opacity: 0.8;
+}
+
+.scenicSpotInfoManage .cancel-Btn {
+  width: 90px;
+  height: 30px;
+  background: rgba(255, 255, 255, 1);
+  border-radius: 15px;
+  color: #e95252;
+  outline: none;
+  cursor: pointer;
+  border: 1px solid #e95252;
+}
+
+.scenicSpotInfoManage .re-img {
+  width: 140px;
+  height: 93px;
+  border-radius: 10px;
+  float: left;
+  margin: 0 30px 30px 0;
+  position: relative;
+}
+
+.scenicSpotInfoManage .re-img:first-child {
+  margin-left: 0;
+}
+
+.scenicSpotInfoManage .resource-imglist {
+  width: 100%;
+  height: auto;
+  margin-top: 20px;
+}
+
+.scenicSpotInfoManage .resource-imglist img {
+  width: 100%;
+  height: 100%;
+  border-radius: 10px;
+}
+
+.scenicSpotInfoManage .add-img {
+  margin-top: 20px;
+}
+
+.scenicSpotInfoManage .reimg-add {
+  width: 140px;
+  height: 93px;
+  background: rgba(236, 236, 236, 1);
+  border-radius: 10px;
+  position: relative;
+  cursor: pointer;
+}
+
+.scenicSpotInfoManage .ad-one {
+  display: none;
+  background: rgba(0, 0, 0, 0.4);
+  width: 100%;
+  height: 100%;
+  border-radius: 10px;
+  position: absolute;
+  top: 0;
+  z-index: 999;
+}
+
+.scenicSpotInfoManage .bigAdd {
+  font-size: 50px;
+  color: #d1d1d1;
+  position: absolute;
+  left: 45px;
+  top: 10px;
+}
+
+.scenicSpotInfoManage .imgzhe {
+  display: none;
+  background: rgba(0, 0, 0, 0.4);
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  line-height: 93px;
+  border-radius: 10px;
+  position: absolute;
+  top: 0;
+}
+
+.scenicSpotInfoManage .reimg-add:hover .ad-one {
+  display: block;
+}
+
+.scenicSpotInfoManage .re-img:hover .imgzhe {
+  display: block;
+}
+
+.scenicSpotInfoManage .ad-one div {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  line-height: 32px;
+  text-align: center;
+  background: gray;
+  color: #fff;
+}
+
+.scenicSpotInfoManage .ad-one div:hover {
+  background-color: #fff;
+  color: #e95252;
+}
+
+.scenicSpotInfoManage .re-upload {
+  position: absolute;
+  top: 30px;
+  left: 30px;
+}
+
+.scenicSpotInfoManage .re-find {
+  position: absolute;
+  top: 30px;
+  right: 30px;
+}
+
+.scenicSpotInfoManage .search-imgicon {
+  padding-right: 20px;
+  margin-left: -40px;
+}
+
+.scenicSpotInfoManage .resAddImg {
+  width: 520px;
+  padding-right: 45px;
+}
+
+.scenicSpotInfoManage .addimgContent {
+  height: 290px;
+  overflow: auto;
+  margin: 30px 0 30px 25px;
+  width: 545px;
+}
+
+.scenicSpotInfoManage .addimgDiv {
+  width: 160px;
+  height: 155px;
+  float: left;
+  margin: 0 20px 15px 0;
+  overflow: hidden;
+}
+
+.scenicSpotInfoManage .addimgContent div:first-child {
+  margin-left: 0;
+}
+
+.addimgContent div:nth-child(3n) {
+  margin-right: 0;
+}
+
+.scenicSpotInfoManage .itemImgdiv {
+  width: 160px;
+  height: 106px;
+  position: relative;
+}
+
+.scenicSpotInfoManage .itemImgdiv img {
+  width: 100%;
+  height: 100%;
+  border-radius: 10px;
+}
+
+.scenicSpotInfoManage .imgseclet {
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.4);
+  border-radius: 10px;
+  position: absolute;
+  top: 0;
+  text-align: center;
+  line-height: 106px;
+  color: #e95252;
+}
+
+.icon-dagouyouquan {
+  font-size: 25px;
+}
+
+.scenicSpotInfoManage .test-1::-webkit-scrollbar {
+  width: 0px;
+  height: 0px;
+  background-color: #f5f5f5;
+}
+
+.scenicSpotInfoManage .test-1::-webkit-scrollbar-track {
+  background-color: #f5f5f5;
+}
+
+.scenicSpotInfoManage .test-1::-webkit-scrollbar-thumb {
+  border-radius: 20px;
+  background-color: #aaa;
+  margin-bottom: 24px;
+}
+
+.scenicSpotInfoManage .test-1:hover::-webkit-scrollbar {
+  width: 4px;
+  height: 4px;
+  background-color: #f5f5f5;
+}
+
+.scenicSpotInfoManage .addimg-btnlist {
+  text-align: center;
+}
+
+.scenicSpotInfoManage .addimg-select {
+  font-size: 14px;
+  color: #999999;
+  float: right;
+  margin-bottom: 10px;
+  position: relative;
+  bottom: 20px;
+}
+
+.scenicSpotInfoManage .re-delte {
+  width: 32px;
+  height: 32px;
+  background: gray;
+  border-radius: 50%;
+  text-align: center;
+  display: inline-block;
+  line-height: 32px;
+  color: #fff;
+  cursor: pointer;
+}
+
+.scenicSpotInfoManage .re-delte:hover {
+  color: #e95252;
+  background: #fff;
+}
+
+.scenicSpotInfoManage .imgDescription {
+  font-size: 12px;
+  margin-top: 12px;
+  color: #333333;
+  width: 100%;
+  line-height: 20px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.scenicSpotInfoManage .el-upload-dragger {
+  border: none;
+}
+
+.scenicSpotInfoManage .res-span span:last-child {
+  display: inline;
+}
+
+.scenicSpotInfoManage .resourcerightTop span {
+  display: inline-block;
+}
+
+.scenicSpotInfoManage .resourcerightTop span.width62 {
+  width: 62px;
+}
+
+.scenicSpotInfoManage .sheshi {
+  margin-bottom: 20px;
+}
+
+.scenicSpotInfoManage .dialog-footer {
+  padding-bottom: 30px;
+}
+
+.scenicSpotInfoManage .btn-list {
+  margin: 0 0 40px 30px;
+}
+
+.scenicSpotInfoManage .input-with-select .el-input-group__prepend {
+  background-color: #fff;
+}
+
+.scenicSpotInfoManage .el-textarea__inner {
+  resize: none;
+  height: 120px;
+  font-family: "微软雅黑";
+}
+
+.scenicSpotInfoManage .R1:focus {
+  border: 1px solid #e95252;
+}
+
+.scenicSpotInfoManage .el-form-item__label {
+  width: 105px;
+  font-size: 12px;
+}
+
+.scenicSpotInfoManage .el-form-item__error {
+  left: 100px;
+}
+
+.scenicSpotInfoManage .hotelDay {
+  margin-left: 10px;
+}
+
+.scenicSpotInfoManage .searchImgIcon {
+  cursor: pointer;
+}
+
+.scenicSpotInfoManage .el-dialog--center .el-dialog__body {
+  padding: 25px 25px 0;
+}
+
+.scenicSpotInfoManage .addressInput .el-input-group__append {
+  border-top-right-radius: 17px;
+  border-bottom-right-radius: 17px;
+}
+
+.scenicSpotInfoManage ::-webkit-input-placeholder {
+  color: #d1d1d1;
+}
+
+.scenicSpotInfoManage :-moz-placeholder {
+  color: #d1d1d1;
+}
+
+.scenicSpotInfoManage ::-moz-placeholder {
+  color: #d1d1d1;
+}
+
+.scenicSpotInfoManage :-ms-input-placeholder {
+  color: #d1d1d1;
+}
+
+.scenicSpotInfoManage .el-switch.is-checked .el-switch__core {
+  border-color: #4bca81;
+  background-color: #4bca81;
+}
+
+.scenicSpotInfoManage .orderAdd {
+  position: relative;
+  width: 340px;
+}
+
+.scenicSpotInfoManage .minus:hover {
+  background-color: #cccccc;
+  cursor: pointer;
+}
+
+.scenicSpotInfoManage .minus {
+  width: 34px;
+  height: 32px;
+  border: #dcdfe6;
+  color: #fff;
+  text-align: center;
+  line-height: 34px;
+  position: absolute;
+  left: 101px;
+  border-radius: 50%;
+  z-index: 999;
+  top: 4px;
+  background-color: #dcdfe6;
+}
+
+.scenicSpotInfoManage .addPeople {
+  width: 34px;
+  height: 32px;
+  top: 4px;
+  background-color: #dcdfe6;
+  color: #fff;
+  text-align: center;
+  line-height: 34px;
+  position: absolute;
+  right: 41px;
+  border-radius: 50%;
+  z-index: 999;
+}
+
+.scenicSpotInfoManage .addPeople:hover {
+  background-color: #cccccc;
+  cursor: pointer;
+}
+
+.scenicSpotInfoManage .orderAdd .el-input__inner {
+  padding-left: 90px;
+}
+
+.scenicSpotInfoManage .littleadd {
+  font-size: 12px !important;
+  color: #fff;
+  display: inline-block;
+}
+
+.scenicSpotInfoManage .footabs {
+  width: 286px;
+  min-height: 34px;
+  border: 1px solid #d1d1d1;
+  margin-left: 10px;
+  display: inline-block;
+  background-color: #fff;
+  padding: 5px 10px;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.scenicSpotInfoManage .foodtips {
+  display: inline-block;
+  padding: 3px 5px;
+  background-color: #efefef;
+  margin: 3px;
+  position: relative;
+}
+
+.scenicSpotInfoManage .toolOne {
+  margin: 0 0 28px 38px;
+  display: flex;
+}
+
+.scenicSpotInfoManage .foodTipsDiv {
+  max-width: 200px;
+  display: inline;
+}
+
+.scenicSpotInfoManage .wInput {
+  border: none;
+  height: 30px;
+}
+
+.scenicSpotInfoManage .wInput .el-input__inner {
+  border: none !important;
+  height: 28px;
+  padding: 0;
+  border-radius: 0;
+  margin-top: 2px;
+}
+
+.scenicSpotInfoManage .delTips {
+  position: absolute;
+  right: -5px;
+  top: -5px;
+  cursor: pointer;
+  color: #999;
+  font-size: 14px;
+}
+
+.scenicSpotInfoManage .delTips:hover {
+  color: #e95252;
+}
+
+.scenicSpotInfoManage .fanyong {
+  font-size: 12px;
+  color: #666666;
+  margin-right: 10px;
+}
+
+.scenicSpotInfoManage .footabs .el-tag {
+  margin: 0 5px 5px 0;
+}
+
+.scenicSpotInfoManage .footabs .el-input__inner {
+  height: 30px;
+  position: relative;
+}
+
+.scenicSpotInfoManage .button-new-tag {
+  height: 30px;
+  line-height: 30px;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.scenicSpotInfoManage .input-new-tag {
+  width: 90px;
+  margin-left: 10px;
+  vertical-align: bottom;
+}
+
+.scenicSpotInfoManage .el-dialog--center .el-dialog__body {
+  padding: 15px 25px 0 !important;
+}
+
+.scenicSpotInfoManage .mapList {
+  width: 850px !important;
+  height: 510px !important;
+}
+
+.scenicSpotInfoManage .fanbili {
+  margin-top: 8px;
+}
+
+.scenicSpotInfoManage .RabateDiv {
+  margin-left: 10px;
+}
+
+.scenicSpotInfoManage .RebateCount {
+  height: 34px;
+  border-radius: 17px;
+  float: left;
+}
+
+.scenicSpotInfoManage .reOne,
+.scenicSpotInfoManage .reTwo,
+.scenicSpotInfoManage .dayNum {
+  position: relative;
+}
+
+.scenicSpotInfoManage .leftPnum {
+  float: left;
+  width: 50px;
+  height: 32px;
+  line-height: 32px;
+  text-align: center;
+  border-right: 1px solid #cccccc;
+  position: absolute;
+  left: 1px;
+  top: 1px;
+  border-top-left-radius: 17px;
+  border-bottom-left-radius: 17px;
+}
+
+.scenicSpotInfoManage .toolInput {
+  height: 34px;
+  padding-left: 5px;
+  border: none;
+}
+
+.scenicSpotInfoManage .inpuOne {
+  width: 135px;
+  padding-left: 55px;
+  border: 1px solid #d1d1d1;
+  border-right: none;
+}
+
+.scenicSpotInfoManage .inpuTwo {
+  width: 166px;
+  padding: 0 45px 0 55px;
+  border: 1px solid #d1d1d1;
+}
+
+.scenicSpotInfoManage .percentCon {
+  float: right;
+  width: 40px;
+  height: 32px;
+  text-align: center;
+  border-left: 1px solid #cccccc;
+  line-height: 32px;
+  border-top-right-radius: 17px;
+  border-bottom-right-radius: 17px;
+  position: absolute;
+  right: 1px;
+  top: 1px;
+}
+
+.scenicSpotInfoManage .fanNum {
+  float: left;
+  width: 50px;
+  height: 32px;
+  line-height: 32px;
+  text-align: center;
+  border-right: 1px solid #cccccc;
+  position: absolute;
+  left: 1px;
+  top: 1px;
+}
+
+.scenicSpotInfoManage .fdTag {
+  margin-top: 13px;
+}
+
+.scenicSpotInfoManage .addAddress .el-input__inner {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  border: 1px solid #d1d1d1 !important;
+}
+
+.scenicSpotInfoManage .el-input-group__append {
+  border-top-right-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+}
+</style>
+
+<script>
+export default {
+    data() {
+        return {
+      defaultImg: 'this.src="' + require("../assets/img/bg_z1@2x.png") + '"',
+      fileList: [],
+          ImageList: []
+        }
+    },
+    mounted() {
+    },
+    methods: {
+    //上传图片
+    UploadImage(file) {
+      let newArr = [];
+      newArr.push(file.file);
+      let fileName = file.file.name;
+      var path = "/Upload/DMC/";
+      this.UploadSelfFileT(path, newArr, x => {
+        //统一图片处理
+        var obj = this.$DMCUtils.DMCImageObj();
+        var str = x.data.FilePath;
+        var imgUrl = this.domainManager().ViittoFileUrl + x.data.FilePath;
+        obj.Path = str;
+        obj.ShowPath = imgUrl;
+        this.ImageList.push(obj.ShowPath)
+      });
+    },
+    
+    //图片左移右移
+    ExchangeImg(index, IsMove) {
+      var imgItem = this.ImageList[index];
+      //左移
+      if (IsMove == 0) {
+        var upItem = this.ImageList[index - 1];
+        this.$set(this.ImageList, index - 1, imgItem);
+        this.$set(this.ImageList, index, upItem);
+      } else {
+        //右移动
+        var downItem = this.ImageList[index + 1];
+        this.$set(this.ImageList, index + 1, imgItem);
+        this.$set(this.ImageList, index, downItem);
+      }
+    },
+    //删除图片
+    delImg(index) {
+      //更新图片
+      var item = this.ImageList[index];
+      this.ImageList.splice(index, 1);
+    },
+    }
+}
+</script>
\ No newline at end of file