BST_bigScreen/src/views/BasicSettings/Setting.vue

<template>
<div style="overflow:auto">
      <Toptitle title="项目设置">
      </Toptitle>
     <div style="padding: 10px" class="setting" >
        <Card :padding="0" v-for="(item,index) in switch_list" :key="index">
          
          <Input slot="title" v-if="item.title_type" @on-blur="change_title(item,1)" v-model="item.title" autofocus='true' style="width:90%"></Input>
          <p slot="title" v-else @click="change_title(item)">{{item.title}}</p>
            <CellGroup>
                <Cell :title="_item.title" v-for="(_item,_index) in item.content" :key="_index">
                    <i-switch v-model="_item.state" slot="extra"  @on-change="change($event,_index,item)" />
                </Cell>
            </CellGroup>
            <Tooltip max-width="200" :content="item.remark" 
            style="min-width:200px;position:absolute;right:-168px;top:169px;cursor: pointer">
           <Icon type="md-help-circle" size="24" />
            </Tooltip>
        </Card>
      <Card :title="item.title"  :padding="0" v-for="(item,index) in logo_list" :key="index" >
         <Input slot="title" v-if="item.title_type" @on-blur="change_title(item,1)" v-model="item.title" autofocus='true' style="width:80%"></Input>
          <p slot="title" v-else @click="change_title(item)">{{item.title}}</p>
              <a @click="upload(item)" class="upload_pic">上传</a>
              <div class="product-add">
                <div
                  class="items"
                  v-if="item.content"
                >
                  <img
                    @click="looks(item.content)"
                    :src="$store.state.ip + item.content"
                    alt=""
                  />
                  <Icon
                    size="20"
                    @click="delItems(item)"
                    class="delete-img"
                    type="ios-close-circle"
                  />
                </div>

                <div class="add-items" v-show="!item.content">
                  <div class="_item">
                    <Icon size="50" type="ios-add" />
                  </div>
                  <input
                    @change="changeIpt($event,index)"
                    type="file"
                    class="ipt"
                  />
                </div>
              </div>
                 <Tooltip max-width="200" :content="item.remark" 
            style="min-width:200px;position:absolute;right:-168px;top:169px;cursor: pointer">
           <Icon type="md-help-circle" size="24" />
            </Tooltip>
        </Card>
        <Card v-for="(item,index) in text_list" :key="index" :title="item.title" style="width:520px">
          <Input slot="title" v-if="item.title_type" @on-blur="change_title(item,1)" v-model="item.title" autofocus='true' style="width:80%"></Input>
          <p slot="title" v-else @click="change_title(item)">{{item.title}}</p>
           <a @click="upload(item)" class="upload_text">保存</a>
          
                <div  v-for="(_item,_index) in item.content" :key="_index" style="position: relative;top:-40px;display:flex;margin-top:20px">
                   <label style="width:80px;margin-right:60px">{{_item.title}}:</label> <Input v-model="_item.value" />
                </div>
           <Tooltip max-width="200" :content="item.remark" 
            style="min-width:200px;position:absolute;right:-168px;top:169px;cursor: pointer">
           <Icon type="md-help-circle" size="24" />
            </Tooltip>
        </Card>
    </div>
</div>
</template>
<script>
export default {
    data(){
        return {
                switchValue: true,
                switch1:true,
                tempItem:{
                    url:[],
                },
                logo_title:'',
                content:[],
                logo_title:{},
                tempItem_op:{},
                logo_remark:'',
                switch_list:[],
                logo_list:[],
                text_list:[],
            }
    },
   mounted(){
        this.axios.get('/api/basics_config_list').then(res=>{
            this.content = res.data;
            this.content.forEach(item =>{//sub_type 1 文本 2 开关 3 图片
                  if(item.sub_type == 2){
                    this.switch_list.push(item);
                    this.switch_list.forEach(item=>{
                      item.title_type = false;
                    })
                  }
                  if(item.sub_type == 3){
                    this.logo_list.push(item);
                      this.logo_title = item.title
                      this.logo_remark = item.remark
                      this.tempItem_op = item
                      this.tempItem.url = item.content.split(',')
                    this.logo_list.forEach(item=>{
                      item.title_type = false;
                    })
                  }
                  if(item.sub_type == 1){
                    this.text_list.push(item);
                    this.text_list.forEach(item=>{
                      item.title_type = false;
                    })
                  }
                  
            })
        })
    },
    methods:{
      change_title(item,type){
          item.title_type = !item.title_type;
          this.$forceUpdate();
          if(type){
            this.upload(item)
          }
      },
        change(e,index,item){
             this.axios.post('/api/basics_config_edit',item).then(res=>{
                 console.log(res)
             })
        },
        upload(item){
            this.axios.post('/api/basics_config_edit',item).then(res=>{
                if(res.code == 200){
                     this.$Message.success(res.msg)
                }
               
            })
        },
        looks(img) {
      const array = [{ img_url: img }];
      this.$previewImg({
        list: array,
        baseUrl: this.$store.state.ip,
        baseImgField: "img_url",
        baseTitleField: "",
      });
    },
    delItems(item) {
      item.content = null;
    },
    changeIpt(e,index) {
      let file = e.target.files[0];
      
      this.postImg(file,index);
      // e.target.value = null;
    },
    postImg(file, index) {
      let formData = new FormData();
      formData.append("file", file);
      this.axios.post("/api/upload_pic", formData).then((res) => {
        this.$nextTick(() => {
         this.logo_list[index].content= res.data.url;
   
    
          // this.$forceUpdate();
        });
      });
    },
    }
       
        }
</script>
<style scoped lang='scss'>
.setting{
   margin-top:10px ;
   display: flex;
   flex-wrap: wrap;
}
.product-add {
  position: relative;
  top: -25px;
  height: 140px;
  .ipt {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    outline: none;
    top: 0;
    left: 0;
  }
  .add-items {
      position: relative;
      left: 50%;
      top:40% ;
      transform: translate(-50%,-50%);
    width: 40px;
    height: 40px;
    border: 1px dotted #e7e7e7;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background: #f4f5f7;
    .item {
      width: 46px;
      height: 46px;
      background: #3764ff;
      opacity: 0.6;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 50%;
      color: #fff;
    }
  }
  .items {
    width: 100px;
    height: 100px;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
    border-radius: 5px;
    position: relative;
    left:50%;
    top: 40%;
    transform: translate(-50%,-50%);
    img {
      max-width: 100px;
      max-height: 100px;
    }
  }
}
/deep/ .ivu-card{
         background:  #f8f8f9;
         width: 250px;
         height: 200px;
         margin: 10px;
         border-radius: 20px;
         position: relative;
  .ivu-card:hover{
      box-shadow: darkgrey 2px 2px 2px 2px ;//边框阴影
  }
}
 /deep/ .ivu-card-head{
    border-bottom: none;
    height: 60px;
    p{
         font-weight: 800;
    }
   
}
/deep/ .ivu-card-body{
    height: 200px;
}
.delete-img{
    position: relative;
    top:-35px
}
.upload_pic{
    position: relative;
    top: -44px;
    right: -200px;
    color: red;
}
.upload_text{
   position: relative;
    top: -60px;
    right: -444px;
    color: red;
}
/deep/ .ivu-cell-group{
  position: relative;
  top: -10px;
}
</style>