服务商

jiangping

2023-12-29 f9691d544e62d6c04dbfe45d05a6c7bc5e004291

 admin/src/views/business/miniproSetting.vue

@@ -10,38 +10,74 @@
        <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>
        <el-input v-model="form.rentDeposit" @change="changeVal(form.rentDeposit,1)" type="number" 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-picker placeholder="开始时间" value-format="HH:mm" format='HH:mm'
          v-model="form.businessStarttime"></el-time-picker>
        至
        <el-time-select placeholder="结束时间" v-model="form.businessEndtime"></el-time-select>
        <el-time-picker placeholder="结束时间" value-format="HH:mm" format='HH:mm'
          v-model="form.businessEndtime"></el-time-picker>
      </el-form-item>
      <el-form-item label="免费骑行时长">
        <el-input v-model="form.freeRentTime" placeholder="请输入名称"></el-input>
        <el-input v-model="form.freeRentTime" type="number" @change="changeVal(form.freeRentTime,2)" 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>
          低于<el-input style="width: 80px;" v-model="form.warnMin" @change="changeVal(form.warnMin,3)" type="number" placeholder="最小值"></el-input>
          或高于<el-input style="width: 80px;" v-model="form.warnMax" @change="changeVal(form.warnMax,4)" type="number" 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 label="预警钉钉群地址">-->
<!--        <el-input v-model="form.warnDingdingUrl" placeholder="请输入预警钉钉群地址"></el-input>-->
<!--      </el-form-item>-->
      <el-form-item label="租赁须知主图">
        <div style="display: flex;">
          <UploadAvatarImage
            :file="{ 'imgurlfull': form.leaseNoticeUrl, 'imgurl': leaseNoticeUrl }"
            :uploadData="uploadData" tipsLabel="" @uploadSuccess="uploadOutSuccess" @uploadEnd="isUploading=false"
            @uploadBegin="isUploading=true" />
            <div class="tips">
              <el-button type="text" style="color: red;" @click="form.leaseNoticeUrl = ''">删除</el-button>
            </div>
        </div>
      </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>
        <div style="display: flex;">
          <div style="width: 250px;height: 180px" v-if="form.rentTipsVideo">
            <video controls :src="form.rentTipsVideo" style="width: 100%;height: 100%"></video>
          </div>
<!--          <el-upload class="avatar-uploader" :action="uploadImgUrl" :show-file-list="false" accept=".mp4"-->
<!--            :data="{ folder: 'bike', }" :on-success="handleAvatarSuccess">-->
<!--            <video v-if="form.rentTipsVideo" :src="form.rentTipsVideo" class="avatar"></video>-->
<!--            <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
<!--          </el-upload>-->
          <div class="tips">
            <div>
              <el-upload
                class="upload-demo"
                ref="upload"
                :action="uploadImgUrl"
                :show-file-list="false"
                accept=".mp4"
                :data="{ folder: 'bike', }"
                :on-success="handleAvatarSuccess">
                <el-button slot="trigger" size="small" type="primary">上传视频</el-button>
                <div slot="tip" class="el-upload__tip">只能上传mp4格式，建议不超过50M</div>
              </el-upload>
              <el-button type="text" style="color: red;" @click="form.rentTipsVideo = ''">删除</el-button>
            </div>
<!--            <div>只能上传mp4格式，建议不超过50M</div>-->
          </div>
        </div>

      </el-form-item>
      <el-form-item label="租赁须知">
        <RichEditor :content="{ content: form.leaseNotice }" @edit="form.leaseNotice = $event"></RichEditor>
      </el-form-item>
      <el-form-item label="骑车通知内容">
        <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 8 }" v-model="form.rentNotice"
@@ -56,14 +92,27 @@
            placeholder="请输入停止服务提示"></el-input>
        </el-form-item>
        <el-form-item label="停止服务时间">
          <el-time-select placeholder="开始时间" v-model="form.stopServeStarttime"></el-time-select>
          <!-- <el-time-picker placeholder="开始时间" format='HH:mm' value-format="yyyy-MM-dd HH:mm:ss"
            v-model="form.stopServeStarttime"></el-time-picker>
          至
          <el-time-select placeholder="结束时间" v-model="form.stopServeEndtime"></el-time-select>
          <el-time-picker placeholder="结束时间" value-format="yyyy-MM-dd HH:mm:ss" format='HH:mm'
            v-model="form.stopServeEndtime"></el-time-picker> -->
            <el-date-picker
              v-model="value1"
              type="datetimerange"
              @change="selectDate"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
            ></el-date-picker>
          <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-button type="primary" v-permissions="['system:dict:updateMiniProgrammeDTO']"
          @click="saveSetting">保存配置项</el-button>
      </el-form-item>
    </el-form>
  </TableLayout>
@@ -72,15 +121,27 @@
<script>
import TableLayout from '@/layouts/TableLayout'
import { getMiniProgrammeDTO, updateById } from '@/api/business/minproSetting'
import UploadAvatarImage from '@/components/common/UploadAvatarImage.vue'
import RichEditor from '@/components/common/RichEditor.vue'
export default {
  name: 'BaseParam',
  components: { TableLayout },
  data() {
  components: { TableLayout, UploadAvatarImage, RichEditor },
  data () {
    return {
      uploadImgUrl: process.env.VUE_APP_API_PREFIX + '/public/uploadLocal',
      option: {
        format: 'HH:mm'
      },
      uploadData: { folder: 'bike' },
      leaseNoticeUrl: '',
      isUploading: false,
      value1: [],
      // 搜索
      form: {
        businessEndtime: '',
        businessStarttime: '',
        leaseNoticeUrl: '',
        leaseNotice: '',
        freeRentTime: '',
        isStopServe: 0,
        projectName: '',
@@ -93,20 +154,52 @@
        stopServeTips: '',
        warnDingdingUrl: '',
        warnMax: '',
        warnMin: '',
        warnMin: ''
      }
    }
  },
  created() {
  created () {
    getMiniProgrammeDTO()
      .then(res => {
        console.log(res);
        this.form = res
        this.value1 = [res.stopServeStarttime, res.stopServeEndtime]
      })
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    changeVal (val, type) {
      if (type === 1) {
        if (this.form.rentDeposit < 0) {
          this.form.rentDeposit = ''
        }
      } else if (type === 2) {
        if (this.form.freeRentTime < 0) {
          this.form.freeRentTime = ''
        }
      } else if (type === 3) {
        if (this.form.warnMin < 0) {
          this.form.warnMin = ''
        }
      } else if (type === 4) {
        if (this.form.warnMax < 0) {
          this.form.warnMax = ''
        }
      }
    },
    handleAvatarSuccess (res, file) {
      console.log(res.data.url)
      this.form.rentTipsVideo = res.data.url
    },
    uploadOutSuccess (file) {
      this.leaseNoticeUrl = file.imgurl
      this.form.leaseNoticeUrl = file.imgurlfull
    },
    selectDate (v) {
      this.form.stopServeStarttime = ''
      this.form.stopServeEndtime = ''
      if (v) {
        this.form.stopServeStarttime = v[0]
        this.form.stopServeEndtime = v[1]
      }
    },
    // beforeAvatarUpload(file) {
    //   console.log(file.type);
@@ -120,19 +213,32 @@
    //   // }
    //   return isJPG;
    // },
    saveSetting() {
    saveSetting () {
      const reg = /^[0-9][0-9]*|0\.\d*[0-9]\d*$/
      if (!reg.test(this.form.rentDeposit)) {
        return this.$tip.apiFailed({ message: '押金金额必须大于0' })
      }
      if (!reg.test(this.form.freeRentTime)) {
        return this.$tip.apiFailed({ message: '免费骑行时长必须大于0' })
      }
      if (!reg.test(this.form.warnMin)) {
        return this.$tip.apiFailed({ message: '满载预警必须大于0' })
      }
      if (!reg.test(this.form.warnMax)) {
        return this.$tip.apiFailed({ message: '满载预警必须大于0' })
      }
      updateById(this.form)
        .then(res => {
          this.$tip.apiSuccess('保存成功')
        })
    }
  },
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-form {
  width: 800px;
  width: 900px;
}

::v-deep .table-content {
@@ -174,5 +280,9 @@

.tips {
  color: #999;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  margin-left: 10px;
}
</style>