<template> 
 | 
  <TableLayout :permissions="['business:baseparam:query']"> 
 | 
    <!-- 搜索表单 --> 
 | 
    <el-form ref="form" slot="search-form" :model="form" label-width="130px" label-suffix=":"> 
 | 
  
 | 
      <el-form-item label="主页主题"> 
 | 
        <el-input v-model="form.projectName" placeholder="请输入主页主题"></el-input> 
 | 
      </el-form-item> 
 | 
      <el-form-item label="服务电话"> 
 | 
        <el-input v-model="form.serverPhone" placeholder="请输入服务电话"></el-input> 
 | 
      </el-form-item> 
 | 
      <el-form-item label="押金金额"> 
 | 
        <el-input v-model="form.rentDeposit" placeholder="请输入押金金额"></el-input> 
 | 
        <div class="tips">请输入需要缴纳的押金金额(单位:元)</div> 
 | 
      </el-form-item> 
 | 
      <el-form-item label="营业时间"> 
 | 
        <el-time-select placeholder="开始时间" v-model="form.businessStarttime"></el-time-select> 
 | 
        至 
 | 
        <el-time-select placeholder="结束时间" v-model="form.businessEndtime"></el-time-select> 
 | 
      </el-form-item> 
 | 
      <el-form-item label="免费骑行时长"> 
 | 
        <el-input v-model="form.freeRentTime" placeholder="请输入名称"></el-input> 
 | 
        <div class="tips">免费骑行时长,单位:分钟</div> 
 | 
      </el-form-item> 
 | 
      <el-form-item label="满载预警(%)" prop="name"> 
 | 
        <div style="display: flex;"> 
 | 
          低于<el-input style="width: 80px;" v-model="form.warnMin" placeholder="最小值"></el-input> 
 | 
          或高于<el-input style="width: 80px;" v-model="form.warnMax" placeholder="最大值"></el-input> 
 | 
          会想钉钉群发送预警 
 | 
        </div> 
 | 
        <div class="tips">当车辆满载超过以上配置时,提示管理员</div> 
 | 
      </el-form-item> 
 | 
      <el-form-item label="预警钉钉群地址"> 
 | 
        <el-input v-model="form.warnDingdingUrl" placeholder="请输入预警钉钉群地址"></el-input> 
 | 
      </el-form-item> 
 | 
      <el-form-item label="租赁流程视频" prop="name"> 
 | 
        <!-- :before-upload="beforeAvatarUpload" --> 
 | 
        <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false" 
 | 
          accept=".mp4" :on-success="handleAvatarSuccess"> 
 | 
          <video v-if="form.rentTipsVideo" :src="form.rentTipsVideo" class="avatar"></video> 
 | 
          <!-- <img v-if="imageUrl" :src="imageUrl" > --> 
 | 
          <i v-else class="el-icon-plus avatar-uploader-icon"></i> 
 | 
        </el-upload> 
 | 
        <div class="tips">只能上传mp4格式,建议不超过50M</div> 
 | 
      </el-form-item> 
 | 
      <el-form-item label="骑车通知内容"> 
 | 
        <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 8 }" v-model="form.rentNotice" 
 | 
          placeholder="请输入骑车通知内容"></el-input> 
 | 
      </el-form-item> 
 | 
      <el-form-item label="是否停止服务"> 
 | 
        <el-switch v-model="form.isStopServe" active-value="1" inactive-value="0" active-color="#13ce66"></el-switch> 
 | 
      </el-form-item> 
 | 
      <template v-if="form.isStopServe == 1"> 
 | 
        <el-form-item label="停止服务提示" prop="name"> 
 | 
          <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 8 }" v-model="form.stopServeTips" 
 | 
            placeholder="请输入停止服务提示"></el-input> 
 | 
        </el-form-item> 
 | 
        <el-form-item label="停止服务时间"> 
 | 
          <el-time-select placeholder="开始时间" v-model="form.stopServeStarttime"></el-time-select> 
 | 
          至 
 | 
          <el-time-select placeholder="结束时间" v-model="form.stopServeEndtime"></el-time-select> 
 | 
          <div class="tips">停止服务开始时间至结束时间</div> 
 | 
        </el-form-item> 
 | 
      </template> 
 | 
      <el-form-item label=""> 
 | 
        <el-button type="primary" v-permissions="['system:dict:updateMiniProgrammeDTO']" @click="saveSetting">保存配置项</el-button> 
 | 
      </el-form-item> 
 | 
    </el-form> 
 | 
  </TableLayout> 
 | 
</template> 
 | 
  
 | 
<script> 
 | 
import TableLayout from '@/layouts/TableLayout' 
 | 
import { getMiniProgrammeDTO, updateById } from '@/api/business/minproSetting' 
 | 
export default { 
 | 
  name: 'BaseParam', 
 | 
  components: { TableLayout }, 
 | 
  data() { 
 | 
    return { 
 | 
      // 搜索 
 | 
      form: { 
 | 
        businessEndtime: '', 
 | 
        businessStarttime: '', 
 | 
        freeRentTime: '', 
 | 
        isStopServe: 0, 
 | 
        projectName: '', 
 | 
        rentDeposit: '', 
 | 
        rentNotice: '', 
 | 
        rentTipsVideo: '', 
 | 
        serverPhone: '', 
 | 
        stopServeStarttime: '', 
 | 
        stopServeEndtime: '', 
 | 
        stopServeTips: '', 
 | 
        warnDingdingUrl: '', 
 | 
        warnMax: '', 
 | 
        warnMin: '', 
 | 
      } 
 | 
    } 
 | 
  }, 
 | 
  created() { 
 | 
    getMiniProgrammeDTO() 
 | 
      .then(res => { 
 | 
        console.log(res); 
 | 
        this.form = res 
 | 
      }) 
 | 
  }, 
 | 
  methods: { 
 | 
    handleAvatarSuccess(res, file) { 
 | 
      this.imageUrl = URL.createObjectURL(file.raw); 
 | 
    }, 
 | 
    // beforeAvatarUpload(file) { 
 | 
    //   console.log(file.type); 
 | 
    //   const isJPG = file.type === 'video/mp4'; 
 | 
  
 | 
    //   if (!isJPG) { 
 | 
    //     this.$message.error('只能是 mp4 格式!'); 
 | 
    //   } 
 | 
    //   // if (!isLt2M) { 
 | 
    //   //   this.$message.error('上传头像图片大小不能超过 2MB!'); 
 | 
    //   // } 
 | 
    //   return isJPG; 
 | 
    // }, 
 | 
    saveSetting() { 
 | 
      updateById(this.form) 
 | 
        .then(res => { 
 | 
          this.$tip.apiSuccess('保存成功') 
 | 
        }) 
 | 
    } 
 | 
  }, 
 | 
} 
 | 
</script> 
 | 
  
 | 
<style lang="scss" scoped> 
 | 
::v-deep .el-form { 
 | 
  width: 800px; 
 | 
} 
 | 
  
 | 
::v-deep .table-content { 
 | 
  padding: 0 !important; 
 | 
  
 | 
  .table-wrap { 
 | 
    padding: 0 !important; 
 | 
  } 
 | 
} 
 | 
  
 | 
.avatar-uploader { 
 | 
  ::v-deep .el-upload { 
 | 
    border: 1px dashed #d9d9d9; 
 | 
    border-radius: 6px; 
 | 
    cursor: pointer; 
 | 
    position: relative; 
 | 
    overflow: hidden; 
 | 
  } 
 | 
  
 | 
  ::v-deep .el-upload:hover { 
 | 
    border-color: #409EFF; 
 | 
  } 
 | 
} 
 | 
  
 | 
.avatar-uploader-icon { 
 | 
  font-size: 28px; 
 | 
  color: #8c939d; 
 | 
  width: 108px; 
 | 
  height: 108px; 
 | 
  line-height: 108px; 
 | 
  text-align: center; 
 | 
} 
 | 
  
 | 
.avatar { 
 | 
  width: 108px; 
 | 
  height: 108px; 
 | 
  display: block; 
 | 
} 
 | 
  
 | 
.tips { 
 | 
  color: #999; 
 | 
} 
 | 
</style> 
 |