YXGJ/components/my_form.vue

<template>
  <view>
    <view class="requiredFieldOnly-head" v-if="requiredFieldOnly">
      <view class="label"> 基本信息 </view>
      <view class="content">
        仅显示必填信息<text style="padding: 0 2.5px" />
        <u-switch activeColor="#C40C24" v-model="unShowAll" />
      </view>
    </view>
    <slot name="head" />
    <block v-for="(item, index) in list" :key="item.key">
      <block v-if="item.isMust || !unShowAll">
        <!-- 文本输入 -->
        <view
          class="input-box"
          v-if="item.type == 'text'"
          :style="{
            marginTop: tovw(item.marginTop || 0),
            opacity: item.disabled ? 0.7 : 1,
          }"
          @click="focusLabel = item.label"
        >
          <view class="box" :class="item.unBorBot ? '' : 'borBot'">
            <view class="label">
              <text class="must" v-if="item.isMust">*</text>
              {{ item.label }}:
            </view>
            <view class="content-box" style="flex: 1">
              <view
                class="content"
                style="display: flex; flex: 1; box-sizing: border-box"
              >
                <input
                  v-if="item.inputmode == 'number'"
                  type="number"
                  :disabled="item.disabled"
                  placeholder-style="color: #BBBBBB;font-family: Source Han Sans SC, Source Han Sans SC;"
                  :focus="focusLabel == item.label"
                  :placeholder="item.placeholder || '请填写' + item.label"
                  :value="item.value"
                  style="flex: 1"
                  @input="onInput($event, index)"
                  :maxlength="item.maxlength || '499'"
                  confirm-type="done"
                />
                <input
                  v-else-if="item.inputmode == 'digit'"
                  type="digit"
                  :disabled="item.disabled"
                  placeholder-style="color: #BBBBBB;font-family: Source Han Sans SC, Source Han Sans SC;"
                  :focus="focusLabel == item.label"
                  :placeholder="item.placeholder || '请填写' + item.label"
                  :value="item.value"
                  style="flex: 1"
                  @input="onInput($event, index)"
                  :maxlength="item.maxlength || '499'"
                  confirm-type="done"
                />
                <textarea
                  v-else
                  :disabled="item.disabled"
                  placeholder-style="color: #BBBBBB;font-family: Source Han Sans SC, Source Han Sans SC;"
                  auto-height
                  type="text"
                  :focus="focusLabel == item.label"
                  :placeholder="item.placeholder || '请填写' + item.label"
                  :value="item.value"
                  style="flex: 1; width: 0; box-sizing: border-box"
                  @input="onInput($event, index)"
                  :maxlength="item.maxlength || '499'"
                  confirm-type="done"
                />
                <icon
                  v-if="item.value && !item.disabled"
                  class="icon"
                  type="clear"
                  size="3.733vw"
                  @click="onClearInput(index)"
                />
                <view style="margin-left: 6px" v-if="item.getPhoneNumber">
                  <u-button
                    color="#C30D23"
                    size="small"
                    open-type="getPhoneNumber"
                    @click.stop=""
                    @getphonenumber="butGetphonenumber($event, index)"
                  >
                    获取微信
                    <text
                      class="iconfont icon-dianhua-hui"
                      style="font-size: 12px; margin-left: 3px"
                    />
                  </u-button>
                </view>
              </view>
              <view v-if="item.errText" class="err-text">
                <icon
                  class="icon"
                  color="#E3041F"
                  type="clear"
                  size="2.733vw"
                />
                {{ item.errText }}
              </view>
            </view>
          </view>
        </view>
        <!-- 文本域 -->
        <view class="textarea-box" v-else-if="item.type == 'textarea'">
          <textarea
            class="textarea"
            :class="item.unBorBot ? '' : 'borBot'"
            :disabled="item.disabled"
            placeholder-style="color: #BBBBBB;font-family: Source Han Sans SC, Source Han Sans SC;"
            type="text"
            :placeholder="item.placeholder || '请填写' + item.label"
            :value="item.value"
            @input="onInput($event, index)"
            :maxlength="item.maxlength || '499'"
            confirm-type="done"
          />
        </view>
        <!-- 显示标题文本域 参考意见反馈 -->
        <view
          class="textarea-box2"
          v-else-if="item.type == 'textarea2'"
          :style="{ marginTop: tovw(item.marginTop || 0) }"
        >
          <view class="label">
            <text class="must" v-if="item.isMust">*</text>
            {{ item.label }}:
          </view>
          <textarea
            class="textarea"
            :class="item.unBorBot ? '' : 'borBot'"
            :disabled="item.disabled"
            placeholder-style="color: #BBBBBB;font-family: Source Han Sans SC, Source Han Sans SC;"
            type="text"
            :placeholder="item.placeholder || '请填写' + item.label"
            :value="item.value"
            @input="onInput($event, index)"
            :maxlength="item.maxlength || '499'"
            confirm-type="done"
          />
        </view>
        <!-- 自定义选项分类 -->
        <view
          class="custom-class-box"
          v-else-if="item.type == 'customClass'"
          :style="{ marginTop: tovw(item.marginTop || 0) }"
        >
          <view class="head">
            <view class="label">
              <text class="must" style="color: #e3041f" v-if="item.isMust"
                >*</text
              >
              {{ item.label }}
            </view>
            <view class="state">
              {{ item.isMultipleChoice ? "可多选" : "仅单选" }}
            </view>
          </view>
          <view class="options">
            <view
              class="option"
              :class="
                item.isMultipleChoice
                  ? item.value.includes(option.value)
                    ? 'active'
                    : ''
                  : item.value == option.value
                  ? 'active'
                  : ''
              "
              v-for="option in item.list"
              :key="option.value"
              hover-class="navigator-hover"
              @click="changOptions(option.value, index)"
            >
              {{ option.remarks }}
            </view>
          </view>
        </view>
        <!-- 选择所在地区 -->
        <picker
          class="region"
          @change="selectRegion($event, index)"
          mode="region"
          :disabled="item.disabled"
          :value="item.value"
          v-else-if="item.type == 'region'"
          :style="{
            marginTop: tovw(item.marginTop || 0),
            opacity: item.disabled ? 0.7 : 1,
          }"
        >
          <view class="box" :class="item.unBorBot ? '' : 'borBot'">
            <view class="label">
              <text class="must" v-if="item.isMust">*</text>
              {{ item.label }}:
            </view>
            <view class="content-box">
              <view class="value" v-if="item.value.length">
                {{ item.value.join(",") }}
              </view>
              <view v-else class="placeholder" hover-class="none">
                {{ item.placeholder || "请选择" + item.label }}
              </view>
              <view
                v-if="!item.disabled"
                class="iconfont icon-a-wodetiaozhuan"
              />
            </view>
          </view>
        </picker>
        <!-- 日期 -->
        <picker
          class="region"
          @change="selectRegion($event, index)"
          mode="date"
          :disabled="item.disabled"
          :value="item.value"
          v-else-if="item.type == 'date'"
          :style="{
            marginTop: tovw(item.marginTop || 0),
            opacity: item.disabled ? 0.7 : 1,
          }"
        >
          <view class="box" :class="item.unBorBot ? '' : 'borBot'">
            <view class="label">
              <text class="must" v-if="item.isMust">*</text>
              {{ item.label }}:
            </view>
            <view class="content-box">
              <view class="value" v-if="item.value">
                {{ item.value }}
              </view>
              <view v-else class="placeholder" hover-class="none">
                {{ item.placeholder || "请选择" + item.label }}
              </view>
              <view
                v-if="!item.disabled"
                class="iconfont icon-a-wodetiaozhuan"
              />
            </view>
          </view>
        </picker>
        <!-- 上传附件 -->
        <view
          class="custom-class-box"
          v-else-if="item.type == 'upload'"
          :style="{ marginTop: tovw(item.marginTop || 0) }"
        >
          <view class="head">
            <view class="label">
              <text class="must" v-if="item.isMust">*</text>
              {{ item.label }}
            </view>
            <view class="state">
              {{ item.placeholder }}
            </view>
          </view>
          <view class="content">
            <view
              class="file-box"
              v-for="file in item.value"
              :key="file.attachmentid"
            >
              <image
                class="image"
                v-if="file.fileType == 'image'"
                :src="file.url"
                mode="aspectFill"
                lazy-load="true"
                @click="previewImg(file)"
              />
              <video
                v-else-if="file.fileType == 'video'"
                class="video"
                :poster="file.subfiles[0].url"
                :src="file.url"
              />
              <image
                class="delete"
                @click.stop="deleteFile(file, index)"
                src="https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202404241713944430197B47af9b2f.png"
                mode="widthFix"
              />
            </view>
            <My_upload
              v-if="item.allowUpload"
              :showLoading="false"
              :maxCount="item.maxCount || 99"
              :accept="item.accept"
              @uploadCallback="uploadCallback($event, index)"
              @onLoading="onUploadLoading($event, index)"
            >
              <view
                class="upload-box"
                v-if="
                  item.maxCount
                    ? item.value.length != item.maxCount
                    : item.value.length != 99
                "
                hover-class="navigator-hover"
              >
                <u-loading-icon v-if="item.loading" />
                <text v-else class="iconfont icon-xiazai" />
                <text style="margin-left: 5px">上传</text>
              </view>
            </My_upload>
          </view>
        </view>
        <!-- 开关 -->
        <view class="region" v-else-if="item.type == 'switch'">
          <view class="box" :class="item.unBorBot ? '' : 'borBot'">
            <view class="label">
              <text class="must" v-if="item.isMust">*</text>
              {{ item.label }}:
            </view>
            <view class="content-box">
              <view />
              <u-switch
                activeColor="#70D95D"
                v-model="item.value"
                :disabled="item.disabled"
                @change="switchChange($event, index)"
              />
            </view>
          </view>
        </view>
        <!-- 性别 -->
        <view class="region" v-else-if="item.type == 'sex'">
          <view class="box" :class="item.unBorBot ? '' : 'borBot'">
            <view class="label">
              <text class="must" v-if="item.isMust">*</text>
              {{ item.label }}:
            </view>
            <u-radio-group
              v-model="item.value"
              placement="row"
              @change="groupChange($event, index)"
            >
              <u-radio
                :customStyle="{ marginRight: tovw(60) }"
                label="男"
                name="男"
              />
              <u-radio label="女" name="女" />
            </u-radio-group>
          </view>
        </view>
        <!-- 单选 -->
        <view class="region" v-else-if="item.type == 'radio'">
          <view class="box" :class="item.unBorBot ? '' : 'borBot'">
            <view class="label">
              <text class="must" v-if="item.isMust">*</text>
              {{ item.label }}:
            </view>
            <u-radio-group
              v-model="item.value"
              :placement="item.placement || 'row'"
              @change="groupChange($event, index)"
            >
              <u-radio
                v-for="option in item.options"
                :customStyle="{
                  marginRight: tovw(
                    option.marginRight || item.marginRight || 0
                  ),
                  marginTop: tovw(option.marginTop || item.marginTop || 0),
                }"
                :key="option.label"
                :label="option.label"
                :name="option.name"
              />
            </u-radio-group>
          </view>
        </view>
        <!-- 路由选择器 -->
        <view
          class="region"
          v-else-if="item.type == 'route'"
          :style="{
            marginTop: tovw(item.marginTop || 0),
            opacity: item.disabled ? 0.7 : 1,
          }"
          @click="item.disabled ? '' : toRoute(item, index)"
        >
          <view class="box" :class="item.unBorBot ? '' : 'borBot'">
            <view class="label">
              <text class="must" v-if="item.isMust">*</text>
              {{ item.label }}:
            </view>
            <view class="content-box">
              <view class="value" v-if="item.showValue.length">
                {{ item.showValue.join(",") }}
              </view>
              <view v-else class="placeholder" hover-class="none">
                {{ item.placeholder || "请选择" + item.label }}
              </view>
              <view
                v-if="!item.disabled"
                class="iconfont icon-a-wodetiaozhuan"
              />
            </view>
          </view>
        </view>
        <!-- 标签 -->
        <view
          class="tag-box custom-class-box"
          v-else-if="item.type == 'tag'"
          :style="{ marginTop: tovw(item.marginTop || 0) }"
        >
          <text class="label">{{ item.label }}</text>
          <view class="tag-list">
            <view class="tag" v-for="tag in item.value" :key="tag">
              <text>{{ tag }}</text>
              <view @click="delTag(tag, index)" class="del">x</view>
            </view>
            <view>
              <u-modal
                :title="item.label"
                :show="showTagModal"
                style="flex: 0 !important"
                confirmColor="#C30D23"
                ref="uModal"
                showCancelButton
                :asyncClose="false"
                @confirm="addTagSend(index)"
                @cancel="showTagModal = false"
              >
                <view class="slot-content">
                  <view
                    v-if="item.errText"
                    class="err-text"
                    style="margin-bottom: 10px"
                  >
                    <icon
                      class="icon"
                      color="#E3041F"
                      type="clear"
                      size="2.733vw"
                    />
                    {{ item.errText }}
                  </view>
                  <u--input
                    :maxlength="item.maxlength ? item.maxlength : '99999'"
                    :focus="showUModal"
                    @input="onTagInput($event, index)"
                    :placeholder="item.placeholder || '请输入'"
                    v-model="tagValue"
                    border="bottom"
                    clearable
                  />
                </view>
              </u-modal>
              <view class="add-tag" @click="showTagModal = true">+ 添加</view>
            </view>
          </view>
        </view>
      </block>
    </block>
  </view>
</template>

<script>
import { formattedFiles, viewImage } from "../utils/settleFiles.js";

export default {
  name: "my_form",
  props: {
    form: {
      type: Array,
      default: [],
    },
    isUncomplete: {
      type: Function,
    },
    onUploading: {
      type: Function,
    },
    requiredFieldOnly: {
      type: Boolean,
    },
    isShowAll: {
      type: Function,
    },
    interrupt: {
      type: Function,
    },
  },
  data() {
    return {
      list: [],
      focusLabel: "",
      unShowAll: false,
      showTagModal: false,
      tagValue: "",
    };
  },
  watch: {
    form: {
      handler: function (newVal) {
        if (newVal) {
          this.list = JSON.parse(JSON.stringify(newVal));
          setTimeout(() => {
            this.verify();
          }, 200);
        }
      },
      immediate: true,
    },
    unShowAll: function (newVal) {
      this.$emit("isShowAll", newVal);
    },
  },
  async created() {
    /*     let list = [{
                key: "name",
                type: "text",
                label: "标题",
                isMust: true,//是否必填
                value: "",
                inputmode:"", //https://uniapp.dcloud.net.cn/component/input.html#type
                marginTop: 10,
                verify:[],
            }, {
                key: "Class",
                type: "customClass",
                label: "标题",
                isMust: false,//是否必填
                isMultipleChoice: true,//是否多选
                value: [],// 多选[] 单选 ""
                isMust: true,//是否必填
                list: await this.getCustomClass('picturespace'),
                marginTop: 10
            },{
                key: "attachmentids",
                type: "upload",
                label: "图片/视频",
                accept:"all",
                placeholder: "可上传多个视频或图片",
                ownertable: "temporary",
                ownerid: 999,
                usetype: 'default',
                allowUpload: true,
                allowDelete: true,
                value:[],
                marginTop: 10
            }, {
                key: "region",
                type: "region",
                label: "所在地区",
                isMust: true,//是否必填
                value: [],
            }, {
                key: "address",
                type: "textarea",
                label: "详细地址",
                isMust: true,//是否必填
                value: '',
            }, {
                key: "isdefault",
                type: "switch",
                label: "设为默认地址",
                isMust: false,//是否必填
                value: false,
                isNum: true,
                unBorBot: true
            }] */
  },
  methods: {
    delTag(tag, index) {
      let item = this.list[index];
      console.log(tag);
      item.value.splice(item.value.indexOf(tag), 1);
      this.$set(this.list[index], "value", item.value);
    },
    addTagSend(index) {
      let item = this.list[index];
      if (!item.errText) {
        item.value.push(this.tagValue);
        this.$set(this.list[index], "value", item.value);
        this.tagValue = "";
        this.showTagModal = false;
      }
    },
    toRoute(item, index) {
      let url = item.path;
      if (item.showValue.length) {
        let obj = JSON.stringify({
          value: item.value,
          showValue: item.showValue,
        });
        url +=
          (url.indexOf("?") == -1
            ? "?alreadySelecteds="
            : "&alreadySelecteds=") + obj;
      }
      uni.navigateTo({
        url,
      });
      this.$Http.routeSelected = function (selected) {
        this.$emit("interrupt", item, selected, index);
        delete this.$Http.routeSelected;
      }.bind(this);
    },
    onTagInput(e, index) {
      let item = this.list[index];
      item.errText = "";
      if (item.verify && item.verify.length && this.tagValue != "") {
        let err = item.verify.find(
          (r) => !new RegExp(r.reg).test(this.tagValue)
        );
        if (err) this.$set(this.list[index], "errText", err.errText);
      }
      this.verify();
    },
    butGetphonenumber(e, index) {
      if (e.detail.code) {
        this.$Http
          .basic({
            id: 20240520110702,
            content: {
              systemclient: getApp().globalData.systemclient,
              code: e.detail.code,
            },
          })
          .then((res) => {
            console.log("获取手机号", res);
            if (this.cutoff(res.msg)) return;
            this.$set(this.list[index], "value", res.data.phoneNumber);
            this.verify();
          });
      }
    },
    onInput(e, index) {
      let item = this.list[index];
      item.errText = "";
      this.$set(this.list[index], "value", e.detail.value);
      if (item.verify && item.verify.length && item.value != "") {
        let err = item.verify.find((r) => !new RegExp(r.reg).test(item.value));
        if (err) this.$set(this.list[index], "errText", err.errText);
      }
      this.verify();
    },
    setItem(index, item, back = false) {
      this.$set(this.list, index, item);
      this.verify();
      if (back) uni.navigateBack();
    },
    setValue(index, value, back = false) {
      this.$set(this.list[index], "value", value);
      this.verify();
      if (back) uni.navigateBack();
    },
    onClearInput(index) {
      let item = this.list[index];
      item.errText = "";
      this.$set(this.list[index], "value", "");
      this.verify();
    },
    switchChange(e, index) {
      this.$set(this.list[index], "value", e);
      this.verify();
    },
    changOptions(value, index) {
      let item = this.list[index];
      if (item.isMultipleChoice) {
        let i = -1;
        try {
          i = item.value.findIndex((v) => v == value);
        } catch (error) {}
        if (i == -1) {
          item.value.push(value);
        } else {
          item.value.splice(i, 1);
        }
        this.$set(this.list[index], "value", item.value);
      } else {
        this.$set(this.list[index], "value", value);
      }
      this.verify();
    },
    verify() {
      let list = this.list.filter((v) => v.isMust);
      let Uncomplete = false;
      if (list.length)
        Uncomplete = list.some((v) => {
          let res = false;
          if (v.type == "customClass") {
            if (v.isMultipleChoice) {
              res = v.value.length == 0;
            } else {
              res = v.value == "";
            }
          } else if (v.type == "upload") {
            res = v.value.length == 0;
          } else if (v.type == "text") {
            res = v.value == "";
            if (v.errText) res = true;
          } else if (v.type == "route") {
            res = v.showValue.length == 0;
          } else {
            res = v.value == "";
          }
          return res;
        });
      if (!Uncomplete)
        Uncomplete = this.list.filter((v) => !v.isMust).some((v) => v.errText);
      this.$emit("isUncomplete", Uncomplete);
    },
    previewImg(item) {
      viewImage(item.url);
    },
    uploadCallback(attachmentids, index) {
      let item = this.list[index];
      this.$Http
        .basic({
          classname: "system.attachment.Attachment",
          method: "createFileLink",
          content: {
            ownertable: item.ownertable,
            ownerid: item.ownerid,
            usetype: item.usetype,
            attachmentids,
          },
        })
        .then((res) => {
          console.log("绑定附件", res);
          if (this.cutoff(res.msg)) return;
          res.data = formattedFiles(res.data);
          item.value.push(res.data[0]);

          //临时文件
          if (res.data[0].ownertable == "temporary")
            try {
              item.temporarys.push(attachmentids[0]);
            } catch (error) {
              item.temporarys = [attachmentids[0]];
            }

          this.$set(this.list[index], "value", item.value);
          this.verify();
        });
    },
    deleteFiles() {
      this.list.forEach((v) => {
        if (v.type == "upload") {
          let linksids = v.value
            .filter((v) => v.ownertable == "temporary")
            .map((v) => v.linksid);
          if (linksids.length)
            this.$Http
              .basic({
                classname: "system.attachment.Attachment",
                method: "deleteFileLink",
                content: {
                  linksids,
                },
              })
              .then((res) => {
                console.log("处理删除附件", res);
                if (this.cutoff(res.msg)) return;
              });
        }
      });
    },
    onUploadLoading(e, index) {
      this.$set(this.list[index], "loading", e);
      this.$emit("onUploading", e);
    },
    groupChange(e, index) {
      this.$set(this.list[index], "loading", e);
      this.verify();
    },
    selectRegion({ detail }, index) {
      this.$set(this.list[index], "value", detail.value);
      this.verify();
    },
    deleteFile(flie, index) {
      let item = this.list[index];
      item.value = item.value.filter(
        (v) => v.attachmentid != flie.attachmentid
      );
      //临时文件
      if (flie.ownertable == "temporary") {
        item.temporarys = item.temporarys.filter((v) => v != flie.attachmentid);
        this.$Http
          .basic({
            classname: "system.attachment.Attachment",
            method: "deleteFileLink",
            content: {
              linksids: [flie.linksid],
            },
          })
          .then((res) => {
            console.log("处理删除附件", res);
            if (this.cutoff(res.msg)) return;
          });
      } else {
        try {
          item.linksids.push(flie.linksid);
        } catch (error) {
          item.linksids = [flie.linksid];
        }
      }
      this.$set(this.list[index], "value", item.value);
      this.verify();
    },
    submit() {
      return new Promise((resolve, reject) => {
        let res = {};
        this.list.forEach((v) => {
          if (v.type == "upload") {
            res.files = {
              temporarys: [],
              linksids: [],
            };
            try {
              res.files.temporarys = v.temporarys || [];
            } catch (error) {}
            try {
              res.files.linksids = v.linksids || [];
            } catch (error) {}
          } else if (v.type == "region") {
            if (v.value.length) {
              res.province = v.value[0];
              res.city = v.value[1];
              res.county = v.value[2];
            } else {
              res.province = "";
              res.city = "";
              res.county = "";
            }
          } else if (v.type == "switch") {
            if (v.isNum) {
              res[v.key] = v.value ? 1 : 0;
            } else {
              res[v.key] = v.value;
            }
          } else if (v.type == "route") {
            if (v.isRadio) {
              const routeValue =
                typeof v.value.length == "number"
                  ? v.value.length
                    ? v.value[0]
                    : ""
                  : v.value || {};
              if (v.keys) {
                v.keys.forEach((e) => {
                  res[e] = routeValue ? routeValue[e] || "" : "";
                });
              } else {
                res[v.key] = {
                  name: v.showValue[0] || "",
                  value: routeValue,
                };
              }
            } else {
              res[v.key] = {
                name: v.showValue || [],
                value: v.value || [],
              };
            }
          } else {
            try {
              res[v.key] = v.value.trim();
            } catch (error) {
              res[v.key] = v.value;
            }
          }
        });
        resolve(res);
      });
    },
  },
};
</script>


<style lang="scss">
.requiredFieldOnly-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100vw;
  height: 45px;
  background: #f7f7f7;
  padding: 0 10px;
  box-sizing: border-box;

  .label {
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 15px;
    color: #333333;
    line-height: 22px;
  }

  .content {
    display: flex;
    align-items: center;
    font-family: PingFang SC, PingFang SC;
    font-size: 14px;
    color: #999999;
  }
}

.borBot {
  border-bottom: 1px #dddddd solid;
}

.custom-class-box {
  width: 100%;
  background: #fff;
  padding: 15px 0 15px 10px;
  box-sizing: border-box;

  .head {
    width: 355px;
    height: 20px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;

    .label {
      font-size: 14px;
      color: #333333;
      line-height: 20px;
    }

    .state {
      font-family: Source Han Sans SC, Source Han Sans SC;
      font-size: 12px;
      color: #999999;
    }
  }

  .options {
    display: flex;
    flex-wrap: wrap;

    .option {
      padding: 6px 10px;
      text-align: center;
      min-width: 81px;
      font-family: PingFang SC, PingFang SC;
      font-size: 14px;
      color: #333333;
      border-radius: 5px;
      background: #f2f2f2;
      margin-top: 10px;
      margin-right: 10px;
      box-sizing: border-box;
    }

    .active {
      background: #c30d23;
      color: #fff;
    }
  }

  .content {
    .file-box {
      position: relative;
      width: 355px;
      height: 240px;
      margin-top: 10px;

      .video,
      .image {
        width: 355px;
        height: 240px;
        border-radius: 5px;
      }

      .delete {
        position: absolute;
        width: 30px;
        top: 0;
        right: 0;
        z-index: 1;
      }
    }

    .upload-box {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 355px;
      height: 45px;
      background: #ffffff;
      border-radius: 5px;
      border: 1px dashed #c30d23;
      font-family: Source Han Sans SC, Source Han Sans SC;
      font-size: 14px;
      color: #c30d23;
      margin-top: 10px;
    }
  }
}

.textarea-box {
  width: 100%;

  .textarea {
    width: 355px;
    height: 160px;
    padding: 15px 10px;
    box-sizing: border-box;
    margin: 0 auto;
  }
}
.textarea-box2 {
  width: 100%;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  padding: 15px 0 15px 10px;
  .label {
    width: 100px;
    margin-right: 10px;
    line-height: 20px;
    font-family: Source Han Sans SC, Source Han Sans SC;
    font-size: 14px;
    color: #666666;
    flex-shrink: 0;

    .must {
      color: #e3041f;
      margin-right: 5px;
    }
  }
  .textarea {
    width: 355px;
    height: 160px;
    padding: 15px 10px;
    box-sizing: border-box;
    margin: 0 auto;
  }
}

.input-box {
  width: 100vw;
  background: #fff;
  box-sizing: border-box;
  padding-left: 10px;

  .box {
    display: flex;
    width: 100%;
    min-height: 54.4px;
    padding: 15px 0;
    box-sizing: border-box;
    align-items: center;
  }

  .label {
    width: 100px;
    margin-right: 10px;
    line-height: 20px;
    font-family: Source Han Sans SC, Source Han Sans SC;
    font-size: 14px;
    color: #666666;
    flex-shrink: 0;

    .must {
      color: #e3041f;
      margin-right: 5px;
    }
  }

  .content-box {
    padding-right: 10px;

    .content {
      flex: 1;
      display: flex;
      align-items: center;
      box-sizing: border-box;

      .icon {
        padding: 5px;
      }
    }

    .err-text {
      font-size: 12px;
      color: #e3041f;
      margin-bottom: -12px;

      .icon {
        margin-right: 2px;
      }
    }
  }
}

.region {
  width: 100vw;
  background: #fff;
  box-sizing: border-box;
  padding: 15px 0 0 10px;

  .box {
    display: flex;
    padding-bottom: 15px;
    padding-right: 10px;
    box-sizing: border-box;

    .label {
      width: 100px;
      margin-right: 10px;
      line-height: 20px;
      font-family: Source Han Sans SC, Source Han Sans SC;
      font-size: 14px;
      color: #666666;
      flex-shrink: 0;

      .must {
        color: #e3041f;
        margin-right: 5px;
      }
    }

    .content-box {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 20px;
      line-height: 20px;

      .placeholder {
        font-family: Source Han Sans SC, Source Han Sans SC;
        font-size: 14px;
        color: #bbbbbb;
      }
    }
  }
}

.tag-box {
  .label {
    width: 100px;
    margin-right: 10px;
    line-height: 20px;
    font-family: Source Han Sans SC, Source Han Sans SC;
    font-size: 14px;
    color: #666666;
    flex-shrink: 0;

    .must {
      color: #e3041f;
      margin-right: 5px;
    }
  }

  .tag-list {
    display: flex;
    align-content: center;
    align-items: center;
    flex-wrap: wrap;
    font-family: PingFang SC, PingFang SC;
    margin-top: 10px;

    .err-text {
      font-size: 12px;
      color: #e3041f;
      margin-bottom: -12px;

      .icon {
        margin-right: 2px;
      }
    }

    .tag {
      padding: 6px 10px;
      background: #f2f2f2;
      border-radius: 5px 5px 5px 5px;
      margin-right: 10px;
      margin-bottom: 10px;
      font-weight: 400;
      font-size: 14px;
      color: #333333;
      display: flex;
      align-items: center;
      align-content: center;
      text-align: center;

      &:last-child {
        margin-right: 0 !important;
      }

      .del {
        margin-left: 10px;
        padding: 2px;
      }
    }

    .add-tag {
      border-radius: 5px 5px 5px 5px;
      border: 1px dashed #c30d23;
      padding: 6px 20px;
      color: #c30d23;
      font-weight: 400;
      margin-bottom: 10px;
      font-size: 14px;
    }
  }
}
</style>