micro_vue/src/scrm_pages/site/components/add-contact.vue

<template>
    <div>
         <div class="feature ">
            <ul >
                <li @click="slideshow = true">
                    <span>
                        <img :src="new1" alt="" style="width:40px;height:40px">
                        <p>轮播图</p>  
                    </span>
                </li>
                <li @click="address = true">
                    <span>
                        <img :src="new2" alt="" style="width:40px;height:40px">
                        <p>医院地址</p>  
                    </span>
                </li>
                <li @click="contact = true">
                    <span>
                        <img :src="new3" alt="" style="width:40px;height:40px">
                        <p>联系方式</p>  
                    </span>
                </li>
                <li @click="time = true">
                    <span>
                        <img :src="new4" alt="" style="width:40px;height:40px">
                        <p>工作时间</p>  
                    </span>
                </li>
                <li @click="type = true">
                    <span>
                        <img :src="new1" alt="" style="width:40px;height:40px">
                        <p>乘车方式</p>  
                    </span>
                </li>
            </ul>
         </div>
<!-- 轮播图 -->
<el-dialog
    title="新增轮播图"
    :visible.sync="slideshow"
    width="550px"
    :before-close="handleClose">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="模块标题: ">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="排序值: ">
        <el-input v-model="form.name"></el-input>
        <p class="tips">请输入1-99的整数，数值越小，模块排序越靠前</p>
      </el-form-item>
      <el-form-item label="添加图片: ">
        <el-upload
          action="https://jsonplaceholder.typicode.com/posts/"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove">
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="slideshow = false">取 消</el-button>
      <el-button type="primary" @click="slideshow = false">确 定</el-button>
    </span>
  </el-dialog>

  <!-- 医院地址 -->
  <el-dialog
    title="新增轮播图"
    :visible.sync="address"
    width="550px"
    :before-close="handleClose">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="模块标题: ">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="排序值: ">
        <el-input v-model="form.name"></el-input>
        <p class="tips">请输入1-99的整数，数值越小，模块排序越靠前</p>
      </el-form-item>
      <el-form-item label="医院地址: ">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="医院地图: ">

      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="address = false">取 消</el-button>
      <el-button type="primary" @click="address = false">确 定</el-button>
    </span>
  </el-dialog>

<!-- 新增联系方式 -->
<el-dialog
    title="新增联系方式"
    :visible.sync="contact"
    width="550px"
    :before-close="handleClose">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="模块标题: ">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="排序值: ">
        <el-input v-model="form.name"></el-input>
        <p class="tips">请输入1-99的整数，数值越小，模块排序越靠前</p>
      </el-form-item>
      <el-form-item label="联系方式: ">
        <div class="used">
             <ul>
                 <li>
                    <span class="name">医院电话</span>
                    <span class="icon"> 
                        <i class="el-icon-edit-outline" @click="addLink = true"></i>
                        <i class="el-icon-delete" @click="deleteList = true"></i>
                    </span>
                 </li>
                 <li>
                    <span class="name">微信号</span>
                    <span class="icon"> 
                        <i class="el-icon-edit-outline" @click="addLink = true"></i>
                        <i class="el-icon-delete" @click="deleteList = true"></i>
                    </span>
                 </li>
             </ul>
        </div>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="addLink = true">添加联系方式</el-button>      
      <el-button @click="contact = false">取 消</el-button>
      <el-button type="primary" @click="contact = false">确 定</el-button>
    </span>
  </el-dialog>


  <!-- 确定删除组件 -->
    <el-dialog
        title="删除提示"
        :visible.sync="deleteList"
        width="550px"
        :before-close="handleClose">
        <span>确认要删除该组件吗？删除后，该组件将无法恢复</span>
        <span slot="footer" class="dialog-footer">
            <el-button @click="deleteList = false">取 消</el-button>
            <el-button type="primary" @click="deleteList = false">确 定</el-button>
        </span>
    </el-dialog>
  <!-- 新增联系方式 -->
  <el-dialog
    title="新增联系方式"
    :visible.sync="addLink"
    width="550px"
    :before-close="handleClose">
    <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="标题:">
            <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="联系方式:">
            <el-radio-group v-model="form.resource">
            <el-radio label="电话"></el-radio>
            <el-radio label="非电话"></el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="内容:">
            <el-input v-model="form.name"></el-input>
        </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
        <el-button @click="addLink = false">取 消</el-button>
        <el-button type="primary" @click="addLink = false">确 定</el-button>
    </span>
  </el-dialog>

 <!-- 工作时间 -->
 <el-dialog
    title="新增工作时间"
    :visible.sync="time"
    width="550px"
    :before-close="handleClose">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="模块标题: ">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="排序值: ">
        <el-input v-model="form.name"></el-input>
        <p class="tips">请输入1-99的整数，数值越小，模块排序越靠前</p>
      </el-form-item>
      <el-form-item label="工作时间: ">
        <el-input
          type="textarea"
          :rows="6"
          placeholder="请输入内容"
          v-model="textarea">
        </el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="time = false">取 消</el-button>
      <el-button type="primary" @click="time = false">确 定</el-button>
    </span>
  </el-dialog>

  <!-- 新增乘车方式 -->
 <el-dialog
    title="新增乘车方式"
    :visible.sync="type"
    width="550px"
    :before-close="handleClose">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="模块标题: ">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="排序值: ">
        <el-input v-model="form.name"></el-input>
        <p class="tips">请输入1-99的整数，数值越小，模块排序越靠前</p>
      </el-form-item>
      <el-form-item label="乘车方式: ">
        <el-input
          type="textarea"
          :rows="6"
          placeholder="请输入内容"
          v-model="textarea">
        </el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="type = false">取 消</el-button>
      <el-button type="primary" @click="type = false">确 定</el-button>
    </span>
  </el-dialog>


    </div>
</template>


<script>
export default {
  name: "addcontact",
  data() {
    return {
      slideshow:false,
      address:false,
      contact:false,
      addLink:false,
      time:false,
      type:false,
      new1: require("../../../assets/preview/u481.png"),
      new2: require("../../../assets/preview/u493.png"),
      new3: require("../../../assets/preview/u496.png"),
      new4: require("../../../assets/preview/u488.png"),
      new5: require("../../../assets/preview/u500.png"),
      
      form: {
        name: ""
      }
    };
  },
  methods:{
    
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

.tips {
  font-size: 12px;
  line-height: 18px;
}
.used {
  ul {
    li {
      height: 44px;
      line-height: 44px;
      font-size: 14px;
      display: flex;
      color: #606266;      
      align-items: center;
      justify-content: space-between;
      border: 1px solid #e4e7ed;
      padding: 0 10px;
      margin-bottom: 10px;
      border-radius: 4px;
      i {
        font-size: 19px;
        margin: 0 6px;
        cursor: pointer;
      }
    }
  }
}
</style>