dl_site_nuxt/pages/inquiry.vue

<template>
  <!-- 询盘类型页面 -->
  <div class="content">
    <BannerTop :options="bannerTopOptions"/>

    <div 
      class="container rich-text" 
      v-html="$store.state.device === '手机端' ? pageInfo.contentApp : pageInfo.content"
    >
    </div>

    <section class="container mt-5 mb-5">
      <div class="form-container box_shadow w-75 m-auto">
        <article class="header">
          <div class="title d-flex align-items-center">
            <h2 class="d-none d-md-block">{{ pageInfo.catgName }}</h2>
            <b-img class="mr-4" :src="footerInfo.formLogo" fluid :alt="$t('index.corporateName')"></b-img>
          </div>
          <p class="row mt-3">
            <label class="col-6 col-md-3">{{ $t('contactUs.contactUs') }}：{{ footerInfo.teams }}</label>
            <label class="col-6">{{ $t('common.tel') }}：{{ footerInfo.tel }}</label>
          </p>
          <p class="row">
            <label class="col-12">{{ $t('common.addressLabel') }}：{{ footerInfo.address }}</label>
          </p>
        </article>

        <main class="form-box">
          <ul class="way row pl-0 justify-content-center ">
            <li class="col-4 text-center">
              <b-img class="mb-2" src="~assets/image//icon/app.png" fluid :alt="$t('common.Mob/Whatsapp/Wechat')"></b-img>
              <h5>{{ $t('common.Mob/Whatsapp/Wechat') }}</h5>
              <p>{{ footerInfo.whatsapp }}</p>
            </li>
            <li class="col-4 text-center">
              <b-img class="mb-2" src="~assets/image//icon/fax.png" fluid :alt="$t('common.fax')"></b-img>
              <h5>{{ $t('common.fax') }}</h5>
              <p>{{ footerInfo.faxNumber }}</p>
            </li>
            <li class="col-4 text-center">
              <b-img class="mb-2" src="~assets/image//icon/app.png" fluid :alt="$t('common.E-mail')"></b-img>
              <h5>{{ $t('common.E-mail') }}</h5>
              <p>{{ footerInfo.email }}</p>
            </li>
          </ul>

          <b-form @submit="onSubmit">
            <b-form-group
              id="input-name"
              label-for="input-name"
              v-if="formConfig.name"
              :invalid-feedback="$t('contactUs.name')"
            >
              <template v-solt:lable>
                <div class="mb-2 d-flex align-items-center">
                  <b-img class="mr-1" src="~assets/image/icon/user.png" fluid :alt="$t('contactUs.name')"></b-img>
                  <h6 class="label-text">{{ $t('contactUs.name') }}</h6>
                </div>
              </template>
              <b-form-input
                id="input-name"
                v-model="dataForm.name"
                :required="formConfig.nameMust"
              >
              </b-form-input>
            </b-form-group>

            <b-form-group
              id="input-title"
              label-for="input-title"
              v-if="formConfig.title"
              :invalid-feedback="$t('contactUs.title')"
            >
              <template v-solt:lable>
                <div class="mb-2 d-flex align-items-center">
                  <b-img class="mr-1" src="~assets/image/icon/title.png" fluid :alt="$t('contactUs.title')"></b-img>
                  <h6 class="label-text">{{ $t('contactUs.title') }}</h6>
                </div>
              </template>
              <b-form-input
                id="input-title"
                v-model="dataForm.title"
                :required="formConfig.titleMust"
              >
              </b-form-input>
            </b-form-group>

            <b-form-group
              id="input-company"
              label-for="input-company"
              v-if="formConfig.company"
              :invalid-feedback="$t('contactUs.company')"
            >
              <template v-solt:lable>
                <div class="mb-2 d-flex align-items-center">
                  <b-img class="mr-1" src="~assets/image/icon/company.png" fluid :alt="$t('contactUs.company')"></b-img>
                  <h6 class="label-text">{{ $t('contactUs.company') }}</h6>
                </div>
              </template>
              <b-form-input
                id="input-company"
                v-model="dataForm.company"
                :required="formConfig.companyMust"
              >
              </b-form-input>
            </b-form-group>

            <b-form-group
              id="input-mail"
              label-for="input-mail"
              v-if="formConfig.email"
              :invalid-feedback="$t('contactUs.mail')"
            >
              <template v-solt:lable>
                <div class="mb-2 d-flex align-items-center">
                  <b-img style="filter: brightness(0%);" class="mr-1" src="~assets/image/icon/email.png" fluid :alt="$t('contactUs.mail')"></b-img>
                  <h6 class="label-text">{{ $t('contactUs.mail') }}</h6>
                </div>
              </template>
              <b-form-input
                id="input-mail"
                type="email"
                v-model="dataForm.email"
                :required="formConfig.emailMust"
              >
              </b-form-input>
            </b-form-group>

            <b-form-group
              id="input-contactWay"
              label-for="input-contactWay"
              :invalid-feedback="$t('contactUs.contactWay')"
              v-if="formConfig.tel"
            >
              <template v-solt:lable>
                <div class="mb-2 d-flex align-items-center">
                  <b-img style="filter: brightness(0%);" class="mr-1" src="~assets/image/icon/labl-phone.png" fluid :alt="$t('contactUs.contactWay')"></b-img>
                  <h6 class="label-text">{{ $t('contactUs.contactWay') }}</h6>
                </div>
              </template>
              <b-form-input
                id="input-contactWay"
                v-model="dataForm.tel"
                :required="formConfig.telMust"
              >
              </b-form-input>
            </b-form-group>

            <b-form-group
              id="input-desc"
              label-for="input-desc"
              :invalid-feedback="$t('contactUs.desc')"
            >
              <template v-solt:lable>
                <div class="mb-2 d-flex align-items-center">
                  <b-img style="filter: brightness(0%);" class="mr-1" src="~assets/image/icon/msg.png" fluid :alt="$t('contactUs.desc')"></b-img>
                  <h6 class="label-text">{{ formConfig.content }}</h6>
                </div>
              </template>
              <b-form-textarea
                id="input-desc"
                v-model="dataForm.content"
                rows="3"
              >
              </b-form-textarea>
            </b-form-group>

            <div class="text-center">
              <b-button class="w-25" type="submit" variant="primary" pill>
                {{ $t('common.submit') }}
              </b-button>
            </div>
          </b-form>
        </main>
      </div>
    </section>
  
    <b-img class="footer-img" src="~assets/image/backGroundImg/contact-us-footer.png" fluid-grow :alt="$t('contactUs.contactUs')"></b-img>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import footer from '../middleware/footer';

export default {
  name: 'inquiry',
  data() {
    return {
      dataForm: {
        name: '',
        title: '',
        company: '',
        email: '',
        tel: '',
        content: '',
        equipment: this.$store.state.device
      }
    }
  },
  computed: {
    ...mapState(['footerInfo'])
  },
  async asyncData({ $axios, query }) {
    const { data: pageInfo } = await $axios.get(`/web/categoryInfo?id=${query.maxCatgId}`)
    let bannerTopOptions = {
      title: pageInfo.catgName,
      subTitle: pageInfo.description,
      img:  require('../assets/image/banner/aboutus-banner.png')
    }
    const { data: formConfig } = await $axios.get('/web/inquirySet')
    
    return {
      pageInfo,
      bannerTopOptions,
      formConfig
    }
  },
  head() {
    return {
      title: this.pageInfo.title,
      meta: [
        {
          hid: 'keywords',
          name: 'keywords',
          content: this.pageInfo.keyword
        },
        {
          hid: 'description',
          name: 'description',
          content: this.pageInfo.description
        }
      ]
    }
  },
  mounted() {
    
  },
  methods: {
    onSubmit(e) {
      e.preventDefault()
      this.$axios.post('/web/inquirySave', this.dataForm).then(() => {
        this.$message.success(this.$t('common.submitSuccess'))
        setTimeout(() => {
          window.location.reload()
        }, 1500)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
  .form-container {
    height: min-content;
    border-radius: 2.125rem;
    overflow: hidden;
    background: linear-gradient( 180deg, #FDFEFE 0%, #F5FBFF 100%);
    .header {
      width: 100%;
      height: min-content;
      background: url('~assets/image/backGroundImg/contact-us-form-bg.png') no-repeat;
      background-size: 100% 100%;
      overflow: hidden;
      .title {
        margin-top: 2.5625rem;
        justify-content: space-between;
        h2 {
          padding: .6875rem 2.75rem .6875rem 1.625rem;
          color: #fff;
          background: rgba(255,255,255,0.44);
          border-radius: 0px 3.125rem 3.125rem 0px;
          font-size: 1.125rem;
          font-family: 'SourceHanSansCN-Heavy';
        }
      }
      p {
        padding-left: 1.875rem;
        color: #fff;
        font-size: .875rem;
      }
    }
    .form-box {
      padding: 2.25rem 5.375rem;
      .way {
        h5 {
          color: #80818a;
          font-size: .875rem;
        }
        p {
          color: #2b2b2b;
          font-size: .875rem;
          word-break: break-word;
        }
      }
      .label-text {
        margin-bottom: 0;
        color: #2b2b2b;
        font-size: .875rem;
      }
    }
  }

  .footer-img {
    margin-top: -5.625rem;
  }
  
  // 特殊样式小屏幕处理
  @media screen and (max-width:400px) {
    .form-container {
      width: 100% !important;
      .header {
        .title {
          margin-top: .625rem;
          justify-content: center;
        }
      }
      .form-box {
        padding: 1.25rem;
      }
    }
    .footer-img {
      margin-top: 0;
    }
  }
}

</style>