feat: 投资舒城

src/api/url/index.js

@@ -14,4 +14,8 @@ export default {
   carrierDetail: '/postcard/api/carrier/v1.0/detail',
   // 招商引资-招商亮点
   investmentLights: '/postcard/api/developmentInfo/v1.0/detail',
+  // 提交咨询信息
+  infoSubmit: '/postcard/api/investClueInfo/save',
+  // 查询条件列表（字典表）
+  queryConditionList: '/postcard/api/sysDictData/listByCodes',
 }

src/pages/investment/index.vue

 <template>
-  <div>投资舒城</div>
-</template>
\ No newline at end of file
+  <div class="invest-us">
+    <div>
+      <u-tabs :list="tabList" @click="handleTab"></u-tabs>
+    </div>
+    <div class="body">
+      <div>
+        持续推进简政放权，为企业提供高效快捷的“一站式”服务;坚持
+        重点招商引资项目调度推进机制。
+      </div>
+
+      <div class="notice-text">
+        您可以留下您的咨询内容，我们收到后会第一时间联系您
+      </div>
+      <div>
+        <u--form
+          labelPosition="top"
+          label-width="auto"
+          :model="formData"
+          :rules="rules"
+          ref="formRef"
+        >
+          <u-form-item label="咨询类别" prop="type" borderBottom required>
+            <u--input
+              v-model="formData.type"
+              readonly
+              border="none"
+              suffixIcon="arrow-right"
+              :suffixIconStyle="{ fontSize: '30rpx' }"
+              placeholder="请输入类别"
+              @tap="changeShowPicker(true)"
+            ></u--input>
+          </u-form-item>
+          <u-form-item label="所属企业" prop="company" borderBottom required>
+            <u--input
+              v-model="formData.company"
+              border="none"
+              placeholder="请输入企业"
+            ></u--input>
+          </u-form-item>
+          <u-form-item label="姓名" prop="name" borderBottom required>
+            <u--input
+              v-model="formData.name"
+              border="none"
+              placeholder="请输入姓名"
+            ></u--input>
+          </u-form-item>
+          <u-form-item label="联系电话" prop="phone" borderBottom required>
+            <u--input
+              v-model="formData.phone"
+              type="number"
+              border="none"
+              placeholder="请输入联系电话"
+            ></u--input>
+          </u-form-item>
+          <u-form-item label="邮箱" prop="email" borderBottom>
+            <u--input
+              v-model="formData.email"
+              border="none"
+              placeholder="请输入邮箱"
+            ></u--input>
+          </u-form-item>
+          <u-form-item label="需求描述" prop="desc" borderBottom>
+            <u--textarea
+              v-model="formData.desc"
+              border="none"
+              placeholder="请输入需求描述"
+            ></u--textarea>
+          </u-form-item>
+        </u--form>
+        <div class="submit-btn" @click="handleSubmit">提交</div>
+      </div>
+    </div>
+    <u-picker
+      :show="showPicker"
+      :columns="formatedTypeList"
+      closeOnClickOverlay
+      @close="changeShowPicker(false)"
+      @confirm="handlePickerConfirm"
+    ></u-picker>
+  </div>
+</template>
+
+<script>
+import API from "@/api/url/index.js";
+
+export default {
+  name: "investUs",
+  data() {
+    return {
+      tabList: [
+        {
+          name: "投资舒城",
+        },
+        {
+          name: "联系我们",
+        },
+      ],
+      tabIndex: 0,
+      formData: null,
+      rules: {
+        type: {
+          required: true,
+          message: "请输入咨询类别",
+          trigger: ["blur", "change"],
+        },
+        company: {
+          required: true,
+          message: "请输入所属企业",
+          trigger: ["blur", "change"],
+        },
+        name: {
+          required: true,
+          message: "请输入姓名",
+          trigger: ["blur", "change"],
+        },
+        phone: [
+          {
+            required: true,
+            message: "请输入联系电话",
+            trigger: ["blur", "change"],
+          },
+          {
+            validator: (rule, value, callback) => {
+              return uni.$u.test.mobile(value);
+            },
+            message: "手机号码不正确",
+            trigger: ["blur", "change"],
+          },
+        ],
+        email: {
+          type: "email",
+          message: "请输入正确的邮箱",
+          trigger: ["blur", "change"],
+        },
+      },
+      isLoading: false,
+      typeList: [],
+      showPicker: false,
+      selectedType: "",
+    };
+  },
+  computed: {
+    formatedTypeList() {
+      const result = this.typeList.map(({ dictLabel }) => dictLabel);
+      return result.length > 0 ? [result] : [];
+    },
+  },
+  onReady() {
+    this.$refs.formRef.setRules(this.rules);
+  },
+  created() {
+    this.init();
+  },
+  watch: {
+    isLoading(val) {
+      if (val) {
+        uni.showLoading();
+      } else {
+        uni.hideLoading();
+      }
+    },
+    selectedType(val) {
+      if (val) {
+        this.formData.type = val.dictLabel;
+      }
+    },
+  },
+  methods: {
+    init() {
+      this.initField();
+      this.initTypeList();
+    },
+    initTypeList() {
+      this.$fetch({
+        url: API.queryConditionList,
+        data: {
+          code: "invest_type",
+        },
+      }).then((res) => {
+        this.typeList = res.invest_type;
+      });
+    },
+    changeLoading(b) {
+      this.isLoading = b;
+    },
+    changeShowPicker(b) {
+      this.showPicker = b;
+    },
+    handleTab(index) {
+      this.tabIndex = index;
+    },
+    handleParams() {
+      const { company, desc, email, name, phone } = this.formData;
+      return {
+        phone,
+        company,
+        details: desc,
+        name,
+        email,
+        consultType: this.selectedType.dictValue,
+      };
+    },
+    initField() {
+      this.formData = {
+        type: "",
+        company: "",
+        name: "",
+        phone: "",
+        email: "",
+        desc: "",
+      };
+    },
+    handleSubmit() {
+      const form = this.$refs.formRef;
+      form
+        .validate()
+        .then(() => {
+          if (!this.isLoading) {
+            this.changeLoading();
+            const params = this.handleParams();
+            this.$fetch({
+              url: API.infoSubmit,
+              data: params,
+              header: {
+                "Content-Type": "application/json",
+              },
+            })
+              .then(() => {
+                wx.showToast({
+                  title: "提交成功",
+                  icon: "none",
+                  duration: 1500,
+                });
+                this.initField();
+                form.clearValidate();
+              })
+              .finally(() => {
+                this.changeLoading(false);
+              });
+          }
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+    },
+    handlePickerConfirm(e) {
+      const { indexs } = e;
+      this.selectedType = this.typeList[indexs[0]];
+      this.changeShowPicker(false);
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.invest-us {
+  background-color: white;
+  .body {
+    padding: 40rpx 30rpx;
+    font-size: 24rpx;
+    color: #333333;
+    font-family: PingFang-SC, PingFang-SC;
+    font-weight: 500;
+    line-height: 30rpx;
+  }
+  .notice-text {
+    margin-top: 36rpx;
+    margin-bottom: 23rpx;
+    color: #ff511b;
+  }
+  .u-form-item__body__left__content {
+    flex: none !important;
+  }
+  .u-form-item__body__left__content__required {
+    left: unset !important;
+    right: -18rpx;
+  }
+  .u-form-item__body__right {
+    margin-top: 20rpx;
+    padding: 20rpx;
+    background-color: #f4f6fa;
+  }
+  .u-form-item ~ .u-form-item {
+    margin-top: 20rpx;
+  }
+  .submit-btn {
+    margin-top: 60rpx;
+    height: 68rpx;
+    background: #4374ef;
+    border-radius: 4rpx;
+    opacity: 1;
+    font-size: 34rpx;
+    font-family: PingFang-SC, PingFang-SC;
+    font-weight: bold;
+    color: #ffffff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .u-textarea {
+    background-color: unset !important;
+    padding: 0 !important;
+  }
+}
+</style>