OpenPlatForm/pages/domain/setApp.vue

<template>
  <div class="setApp">
    <div class="setApp-box">
      <span>您最多可以创建10个应用，如需创建更多应用，请</span
      ><span style="color: #1890ff; cursor: pointer">联系客服</span>
    </div>
    <div class="setApp-body">
      <div class="body-title">创建应用</div>

      <el-form
        class="setApp-content"
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
      >
        <el-form-item label="应用名称" prop="name">
          <el-input
            v-model="ruleForm.name"
            placeholder="请输入应用的名称"
          ></el-input>
          <div class="content-color">
            您的站点，APP等名称，也可自定义，供您进行用途识别
          </div>
        </el-form-item>

        <el-form-item label="应用类型" prop="name">
          <div class="formItem">
            <el-checkbox
              v-for="(item, index) in appType"
              :key="index"
              v-model="item.state"
              >{{ item.name }}</el-checkbox
            >
          </div>
        </el-form-item>

        <el-form-item label="应用描述">
          <el-input
            class="textarea"
            type="textarea"
            placeholder="请输入应用的名称"
            v-model="ruleForm.textarea"
            show-word-limit
          >
          </el-input>
        </el-form-item>

        <el-form-item label="网站URL">
          <el-input
            type="text"
            placeholder="请输入网站URL"
            v-model="ruleForm.textarea"
            show-word-limit
          >
          </el-input>
          <div class="content-color">
            您的应用访问地址或者下载地址，请以http(s)开头
          </div>
        </el-form-item>

        <el-form-item label="应用图标">
          <el-upload
            class="upload-demo"
            drag
            action="https://jsonplaceholder.typicode.com/posts/"
            multiple
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">上传文件</div>
          </el-upload>
        </el-form-item>

        <div style="margin-top:40px">
          <el-button style="width: 100%" type="primary">立即创建</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      appType: [
        {
          name: "电脑版网站",
          id: 1,
          state: false,
        },
        {
          name: "H5移动网站",
          id: 2,
          state: false,
        },
        {
          name: "iOS客户端",
          id: 3,
          state: false,
        },
        {
          name: "Android客户端",
          id: 4,
          state: false,
        },
        {
          name: "微信小程序",
          id: 5,
          state: false,
        },
        {
          name: "其他",
          id: 6,
          state: false,
        },
      ],
      ruleForm: {
        name: "",
        textarea: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
      },
    };
  },
};
</script>



<style lang="scss" scoped>
.setApp-box {
  width: 1200px;
  height: 56px;
  background: #fffcec;
  border-radius: 14px;
  border: 1px solid #feeebb;
  text-align: center;
  line-height: 56px;
  color: #6a3904;
  font-size: 14px;
  margin-bottom: 20px;
}

.setApp-body {
  width: 1200px;
  min-height: 806px;
  background: #ffffff;
  border-radius: 14px;
  padding: 20px;
  box-sizing: border-box;
  .body-title {
    color: #333333;
    font-size: 20px;
    padding-left: 12px;
    height: 20px;
    line-height: 20px;
    border-left: #1890ff 4px solid;
  }
}

.setApp-content {
  width: 435px;
  margin: 0 auto;
  .content-color {
    color: #999999;
    font-size: 12px;
    line-height: 26px;
  }
  .formItem {
    clear: both;
  }
  .textarea {
    height: 150px;
  }
}
</style>