weilaizhixing_official_website/src/views/About/ContactUs/Index.vue

<template>
  <div class="part-building">
    <div style="height:104rem;"></div>
    <div class="screen1">
      <img
        :src="screen1.bannerUrl"
        alt=""
        style="width:100%;"
      />
    </div>
    <div class="screen2">
      <div class="wrapper1680">
        <div class="lineTtile">
          {{ screen2.title }}
        </div>
        <div class="lineTime">
          {{ screen2.lineTime }}
        </div>
        <div class="lineNumber">
          {{ screen2.lineNumber }}
        </div>
        <div class="list-wrapper">
          <div
            v-for="(item, index) in contacts"
            :key="'itemkey' + index"
            class="list-item"
          >
            <el-row>
              <el-col
                :span="8"
                class="imgCol"
              >
                <div class="list-img">
                  <img
                    :src="item.src"
                    alt=""
                  >
                </div>
              </el-col>
              <el-col
                :span="16"
                class="listContent"
              >
                <div class="list-title">
                  {{ item.title }}
                </div>
                <div class="list-value">
                  {{ item.value }}
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
    </div>
    <div class="screen3">
      <div class="wrapper1680">
        <div class="formContent">
          <div class="formBarContent">
            <div class="formBar"></div>
            <div class="formTitle">
              留言反馈
            </div>
          </div>
          <el-form
            ref="feekform"
            :model="form"
            :rules="formRules"
            label-width="110rem"
            style="margin-top: 40rem"
          >
            <div class="formBarContent">
              <el-row>
                <el-col :span="10">
                  <el-form-item
                    label="标题"
                    prop="captionName"
                  >
                    <el-input v-model="form.captionName" />
                  </el-form-item>
                </el-col>
                <el-col :span="7">
                  <el-form-item
                    label="反馈人"
                    prop="userName"
                  >
                    <el-input v-model="form.userName" />
                  </el-form-item>
                </el-col>
                <el-col :span="7">
                  <el-form-item
                    label="联系方式"
                    prop="phoneNumber"
                  >
                    <el-input v-model="form.phoneNumber" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item
                label="反馈内容"
                prop="abstracts"
              >
                <el-input
                  v-model="form.abstracts"
                  :autosize="{ minRows: 6, maxRows: 6 }"
                  type="textarea"
                />
              </el-form-item>
              <el-form-item label="">
                <div class="formRemark">
                  我们敬重每一位反馈人的留言，如您对我们有任何想法、要求或建议，敬请留言，我们会在第一时间受理并向您表示衷心的感谢。
                </div>
              </el-form-item>
            </div>
            <el-form-item style="text-align: center;border-top:1rem solid #B0B0B0;padding: 20rem 0rem">
              <el-button
                class="subBtn"
                @click="handleAdd"
              >
                提交
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <FootBar theme="dark"></FootBar>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import FootBar from '@/components/FootBar.vue';

export default {
  components: {
    FootBar,
  },
  data () {
    return {
      screen1: {
        bannerUrl: '',
      },
      screen2: {
        title: '服务热线',
        lineNumber: '400-001-6725',
        lineTime: '服务时间：周一至周五AM 09:00-12:00  PM 01:00-06:00',
      },
      contacts: [
        { title: '公司网址', value: 'www.Fshg.cc', src: '/static/img/contactUs/website.png' },
        { title: '公司邮箱', value: 'Info@Fshg.cc', src: '/static/img/contactUs/email.png' },
        { title: '公众号', value: 'FutureStarHolding', src: '/static/img/contactUs/publicAccount.png' },
        { title: '公司地址', value: '海南省三亚市天涯区育春路七巷九号', src: '/static/img/contactUs/address.png' },
      ],
      form: {
        captionName: '',
        userName: '',
        phoneNumber: '',
        abstracts: '',
      },
      formRules: {
        captionName: [
          { required: true, message: '请输入标题', trigger: 'blur' },
        ],
        userName: [
          { required: true, message: '请输入联系人', trigger: 'blur' },
        ],
        phoneNumber: [
          { required: true, message: '请输入联系方式', trigger: 'blur' },
          {
            validator: function (rule, value, callback) {
              const reg = /^1[3456789]\d{9}$/;
              const reg3 = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
              if (!(reg.test(value) || reg3.test(value))) {
                callback(new Error('请输入手机号、座机号或邮箱'));
              } else {
                callback();
              }
            },
            trigger: 'blur',
          },
        ],
        abstracts: [
          { required: true, message: '请输入反馈内容', trigger: 'blur' },
        ],
      },
    };
  },
  computed: {
    ...mapState({
      scrollTop: state => state.scroll.scrollTop,
      webScale: state => state.web.scale,
    }),
  },
  created () {
    this.$event.$emit('nav-theme', 'light');
    this.getScreen1Banner();
  },
  methods: {
    async getScreen1Banner () {
      try {
        const res = await this.$request.get(
          '/official/index/list',
          { params: { pageNum: 1, pageSize: 1, captionName: '联系我们/banner' } },
        );
        this.screen1.bannerUrl = res.rows[0].imageurl;
      } catch (error) {}
    },
    handleAdd () {
      try {
        this.$refs["feekform"].validate(valid => {
          if (valid) {
            this.$request.post(
              '/official/message/add',
              this.form,
            ).then(res => {
              if(res.code == 200) {
                this.form = {
                  captionName: '',
                  userName: '',
                  phoneNumber: '',
                  abstracts: '',
                }
              }
            });
          }
        });
      } catch (error) {}
    },
  },
};
</script>

<style scoped>
.part-building {
  width: 100%;
}

.screen2 {
  padding: 80rem 0;
  height: 580rem;
  box-sizing: border-box;
  background: #FFFFFF;
}
.screen2 .lineTtile {
  width: 100%;
  text-align: center;
  font-family: MicrosoftYaHeiSemibold;
  font-weight: 400;
  font-size: 28rem;
  color: #111111;
  line-height: 64rem;
}
.screen2 .lineTime {
  width: 100%;
  text-align: center;
  font-family: MicrosoftYaHeiLight;
  font-size: 20rem;
  color: #8B8A8A;
  line-height: 20rem;
  margin-bottom: 55rem;
}
.screen2 .lineNumber {
  width: 100%;
  text-align: center;
  font-family: Impact;
  font-size: 44rem;
  color: #111111;
  line-height: 44rem;
  font-style: normal;
  text-transform: none;
  letter-spacing:2.8rem;
}
.screen2 .wrapper1680 {
  height: 100%;
  position: relative;
}
.screen2 .list-wrapper {
  position: absolute;
  top: 280rem;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 0rem;
  box-sizing: border-box;
}
.screen2 .list-item {
  width: 375rem;
  height: 120rem;
  border: 1rem solid #C7C7C7;
  background: #ffffff;
  margin: 0 20rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.screen2 .imgCol {
  padding: 30rem 30rem 30rem 60rem;
}
.screen2 .list-img {
  width: 50rem;
  height: 50rem;
}
.screen2 .listContent {
  padding-right: 50rem;
}
.screen2 .list-title {
  margin-top: 18rem;
  font-family: MicrosoftYaHeiSemibold;
  font-size: 18rem;
  color: #000000;
  line-height: 40rem;
  text-align: left;
  font-style: normal;
  text-transform: none;
}
.screen2 .list-value {
  font-family: MicrosoftYaHei;
  font-size: 18rem;
  color: #545454;
  line-height: 22rem;
  text-align: left;
  font-style: normal;
  text-transform: none;
}
.screen3 {
  padding: 80rem 120rem;
  background: #F5F5F7;
}
.screen3 .wrapper1680 {
  height: 478rem;
  background: #FFFFFF;
  border-radius: 10rem 10rem 10rem 10rem;
}
.el-form-item {
  margin-bottom: 22rem !important;
}
/deep/.el-form-item__error {
  font-size: 12rem;
  padding-top: 4rem;
}
/deep/.el-form-item__label {
  font-size: 14rem;
  line-height: 40rem;
  padding: 0 12rem 0 0;
}
/deep/.el-form-item__content {
  line-height: 40rem;
  font-size: 14rem;
}
/deep/.el-input {
  font-size: 14rem;
}
/deep/.el-input__inner {
  border-radius: 4rem;
  border: 1rem solid #DCDFE6;
  height: 40rem;
  line-height: 40rem;
  padding: 0 15rem;
}
/deep/.el-checkbox {
  font-size: 14rem;
  margin-right: 30rem;
}
/deep/.el-checkbox__inner {
  border: 1rem solid #DCDFE6;
  border-radius: 2rem;
  width: 14rem;
  height: 14rem;
}
/deep/.el-checkbox__label {
  padding-left: 10rem;
  line-height: 19rem;
  font-size: 14rem;
}
/deep/.el-textarea {
  font-size: 14rem;
}
/deep/.el-textarea__inner {
  padding: 5rem 15rem;
  border: 1rem solid #DCDFE6;
  border-radius: 4rem;
  height: 138rem !important;
  min-height: 138rem !important;
}
/deep/.el-upload-list__item {
  font-size: 14rem;
  margin-top: 5rem;
  border-radius: 4rem;
}
/deep/.el-button--small {
  padding: 9rem 15rem;
  font-size: 12rem;
  border-radius: 3rem;
}
/deep/.el-upload-list{
  display: inline-flex;
}
/deep/.el-upload-list__item-name {
  margin-right: 40rem;
  padding-left: 4rem;
}
/deep/.el-upload-list__item-status-label {
  right: 5rem;
}
.formContent {
  padding: 20rem 0rem;
}
.formBarContent {
  padding: 0rem 30rem;
}
.formBar {
  display: inline-block;
  width: 4rem;
  height: 20rem;
  background: #014DB5;
}
.formTitle {
  display: inline-block;
  padding-left: 10rem;
  font-family: MicrosoftYaHeiSemibold;
  font-size: 24rem;
  color: #014DB5;
  line-height: 64rem;
  text-align: justifyLeft;
  font-style: normal;
  text-transform: none;
}
.formRemark {
  font-family: MicrosoftYaHei;
  font-size: 18rem;
  color: #BBBBBB;
  line-height: 18rem;
  text-align: left;
  font-style: normal;
  text-transform: none;
}
.subBtn {
  width: 140rem;
  height: 50rem;
  background: #014DB5;
  border-radius: 4rem;
  font-family: MicrosoftYaHei;
  font-size: 18rem;
  color: #FFFFFF;
  text-align: center;
  font-style: normal;
  text-transform: none;
  padding: 12rem 20rem;
}
</style>