jiliangxiaochengxu/pages/companiesRegistered/companiesNotify.vue

<!-- @format -->

<template>
  <view class="container">
    <view class="content">
      <u-alert
        type="warning"
        :show-icon="true"
        :title="`小程序只能注册计量器具使用单位，证件类别只支持营业执照和法人证书，授权委托书请前往PC端进行注册。`"
      ></u-alert>

      <view style="margin-top: 30rpx">
        <u-form labelWidth="140">
          <u-form-item :required="true" label="单位类别">
            <u-checkbox-group
              size="16"
              v-model="unitCategory"
              placement="column"
              @change="checkboxChange"
            >
              <u-checkbox
                :customStyle="{ marginBottom: '8px' }"
                v-for="(item, index) in unitCategoryList"
                :key="index"
                :label="item.dictLabel"
                :name="item.dictLabel"
                :disabled="item.disabled"
              >
              </u-checkbox>
            </u-checkbox-group>
          </u-form-item>
          <u-form-item :required="true" label="证件类别">
            <u-radio-group v-model="documentType" placement="column">
              <u-radio
                :disabled="item.disabled"
                :customStyle="{ marginBottom: '8px' }"
                v-for="(item, index) in documentTypeList"
                :key="index"
                :label="item.name"
                :name="item.name"
              >
              </u-radio>
            </u-radio-group>
          </u-form-item>
        </u-form>
      </view>
    </view>
    <view class="btn">
      <u-button
        @click="handleRegister"
        shape="circle"
        :customStyle="{ width: '300rpx' }"
        type="primary"
        >前往注册</u-button
      >
    </view>
  </view>
</template>
<script>
import { useDict, paraseDict } from "@/utils/index";
export default {
  data() {
    return {
      unitCategory: ["计量器具使用单位"],
      documentType: "营业执照",
      unitCategoryList: [],
      documentTypeList: [
        {
          name: "营业执照",
        },
        {
          name: "法人证书",
        },
        {
          name: "授权委托书",
          disabled: true,
        },
      ],
    };
  },
  onLoad() {
    useDict("common_dwlb").then((res) => {
      this.unitCategoryList = res;
      console.log(this.unitCategoryList);
      this.unitCategoryList.forEach((element) => {
        if (element.dictLabel != "计量器具使用单位") {
          element.disabled = true;
        }
      });
    });
  },
  methods: {
    handleRegister() {
      uni.navigateTo({
        url: `/pages/companiesRegistered/index?type=${this.documentType}`,
        success: (res) => {},
        fail: () => {},
        complete: () => {},
      });
    },
  },
};
</script>
<style lang="scss">
.btn {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 30rpx;
  display: flex;
  justify-content: center;
}
.u-checkbox {
  margin-bottom: 20rpx;
}
.container {
  height: 100vh;
  background: rgb(248, 249, 250);
}
.content {
  background: #fff;
  padding: 30rpx;
  width: 95%;
  margin: 0 auto;
}
</style>