| <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> |