BST_bigScreen/src/views/BasicSettings/copy_Setting.vue

<template>
<div style="overflow-y:auto;overflow-x:hidden;height:92%;width:100%;margin-top:10px">
      <Toptitle title="项目设置">
      </Toptitle>
     <div style="padding: 10px" class="setting" >
         <Card :padding="0" v-for="(item,index) in content" :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" v-if="item.content[0].sub_state!==4">保存</a>

          <div class="card_content">
            <div :title="_item.title" v-for="(_item,_index) in item.content" :key="_index" >
          <!-- 开关 -->
           
                <div v-if="_item.sub_state == 2" style="display:flex;justify-content: space-between;margin:15px 0;">
                  <label>{{_item.title}}</label>  <i-switch :value="_item.value==1?true:false" slot="extra"  @on-change="change($event,_index,item)" style="margin-right:30px" />
                </div>



            <!-- 输入框 -->
                <!-- <div  v-for="(_item,_index) in item.content" :key="_index" style="position: relative;top:-40px;display:flex;margin-top:20px"> -->
                    <div  v-if="_item.sub_state == 1" style="margin:10px 0">
                   <label >{{_item.title}}:</label> <Input v-model="_item.value" style="width:250px;margin-left:20px"/>
               </div>




          <!-- 图片 -->
              <div class="product-add" v-if="_item.sub_state == 3">
                  <label>{{_item.title}}:</label>
                <div
                  class="items"
                  v-if="_item.value"
                >
                  <img
                    @click="looks(_item.value)"
                    :src="$store.state.ip + _item.value"
                    alt=""
                  />
                  <Icon
                    size="20"
                    @click="delItems(_item)"
                    class="delete-img"
                    type="ios-close-circle"
                  />
                </div>

                <div class="add-items" v-show="!_item.value">
                  <div class="_item">
                    <Icon size="50" type="ios-add" />
                  </div>
                  <input
                    @change="changeIpt($event,_index,index)"
                    type="file"
                    class="ipt"
                  />
                </div>
              </div>


            

          <!-- 跳转页面 -->
          <div v-if="_item.sub_state == 4" style="text-align:center;display: flex;flex-direction: column;align-items: center;margin-top:30px">
            <Button type="primary" size='large' @click="$router.push(_item.value)">{{_item.title}}</Button>
          </div>
            </div>
          </div>
            <Tooltip max-width="200" :content="item.remark" 
            style="min-width:200px;position:absolute;right:-168px;bottom:9px;cursor: pointer">
           <Icon type="md-help-circle" size="24" />
            </Tooltip>
        </Card>
        <!-- <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 图片
             item.title_type = false;
                  if(item.sub_type == 2){
                    this.switch_list.push(item);
                    this.switch_list.forEach(item=>{
                     
                    })
                  }
                  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){
            item.content[_index].value = e?1:0;
             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.value = null;
    },
    changeIpt(e,_index,index) {
      let file = e.target.files[0];
      
      this.postImg(file,_index,index);
      e.target.value = null;
    },
    postImg(file, _index,index) {
        
      let formData = new FormData();
      formData.append("file", file);
      this.axios.post("/api/upload_pic", formData).then((res) => {
        this.$nextTick(() => {
         this.content[index].content[_index].value= res.data.url;
   
    
          // this.$forceUpdate();
        });
      });
    },
    }
       
        }
</script>
<style scoped lang='scss'>
.setting{
   margin-top:10px ;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
.product-add {
    margin: 10px 0;
//   position: relative;
//   top: 0
//   height: 140px;
  .ipt {
    position: absolute;
    width: 50px;
    height: 50px;
    opacity: 0;
    cursor: pointer;
    outline: none;
    // top: 0;
    // left: 0;
  }
  .add-items {
      position: relative;
      left: 25px;
      top: 20px;
    //   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: 365px;
        //  height: auto;
         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: auto;
    p{
         font-weight: 800;
    }
   
}
/deep/ .ivu-card-body{
    display: flex;
    flex-direction: column;
}
.delete-img{
    position: relative;
    top:-105px;
    left: 90px;
}
.upload_pic{
    position: relative;
    top: -44px;
    right: -310px;
    color: red;
}
.upload_text{
   position: relative;
    top: -60px;
    right: -444px;
    color: red;
}
.card_content{

    position:relative;
    top: -30px;
    left: 10px;
    display: flex;
    flex-direction: column;
}
// /deep/ .ivu-cell-group{
//   position: relative;
//   top: -10px;
// }
</style>