uk_front/components/PcFooter.vue

<template>
  <footer>
    <div
      class="footer-top"
      v-if="footerBannerList.length > 0">
      <el-image
        lazy
        :src="footerBannerList[0].image"
        alt=""
        class="footer-banner"
        fit="cover"></el-image>
      <div class="top-item">
        <p>Need ideas? Samples? Art assistance?</p>
        <p>Get in touch, we're here to help</p>
        <!-- <el-button
          class="btn btn-red"
          @click="openLoginDialog">
          Become a member
        </el-button> -->
        <div class="btn btn-blue">
          <nuxt-link
            to="/home/contact"
            v-if="isLogin">
            Contact Us
          </nuxt-link>
          <nuxt-link
            to="/home/contactPromoCollection"
            v-else>
            Contact Us
          </nuxt-link>
        </div>
      </div>
    </div>
    <div class="footer-middle com-margin-auto">
      <div class="middle com-margin-auto com-flex">
        <div class="middle-item-left">
          <img
            src="@/assets/img/logo_footer.png"
            alt="" />
          <p>{{ indexConfigWebsite.company_introduction }}</p>
        </div>
        <div class="middle-item-right">
          <div class="item-menu">
            <div class="item-title">OUR PRODUCTS</div>
            <div class="item-line"></div>
            <div class="item-content">
              <div>
                <ul>
                  <li
                    v-for="item in productList"
                    :key="item.id">
                    <nuxt-link
                      :to="{
                        name: 'category-firstCategory',
                        params: {
                          firstCategory: item.name
                            .replace(/\s+/g, '-')
                            .replace('-&', '')
                            .toLowerCase(),
                          id: item.id,
                        },
                      }">
                      {{ item.name }}
                    </nuxt-link>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="item-menu">
            <div class="item-title">CUSTOMER SUPPORT</div>
            <div class="item-line"></div>
            <div class="item-content">
              <div>
                <!-- <nuxt-link to="/home/helpCenter">Help Center </nuxt-link> -->
                <a
                  href="mailto:Info@promocollection.uk?subject=Sample%20Request"
                  v-show="audit_status">
                  Sample Request
                </a>
                <nuxt-link to="/home/termsConditions">
                  Terms & Conditions
                </nuxt-link>
                <!-- <nuxt-link
                    to="/home/refundReturns"
                    v-show="audit_status">
                    Refund & Returns
                  </nuxt-link> -->
              </div>
            </div>
          </div>
          <div class="item-menu">
            <div class="item-title">ADDITIONAL INFO</div>
            <div class="item-line"></div>
            <div class="item-content">
              <div>
                <nuxt-link
                  to="/media"
                  target="_self"
                  >Media Centre
                </nuxt-link>
                <!-- <nuxt-link to="/home/newsLetter"> NewsLetter </nuxt-link> -->
                <nuxt-link
                  to="/home/downloadCenter"
                  v-show="audit_status">
                  Download Center
                </nuxt-link>
                <!-- <nuxt-link to="/home/FAQs"> FAQ </nuxt-link> -->
                <nuxt-link to="/home/privacyPolicy"> Privacy Policy </nuxt-link>
                <nuxt-link
                  to="/home/contact"
                  v-if="isLogin">
                  Contact Us
                </nuxt-link>
                <nuxt-link
                  to="/home/contactPromoCollection"
                  v-else>
                  Contact Us
                </nuxt-link>
                <nuxt-link
                  :to="{
                    path: '/article/About-Us',
                  }"
                  >About Us
                </nuxt-link>
                <div
                  class="item-content-a"
                  @click="goApiWord">
                  API
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div
        v-show="flag_scroll"
        class="goTop"
        @click="backTop">
        <img
          src="@/assets/img/Floating.png"
          alt=""
          @click="backTop" />
      </div>
    </div>
    <div class="footer-bottom">
      <div class="footer-bottom-item com-width-1400 com-margin-auto">
        <div class="footer-bottom-item-left">
          <a href="https://www.facebook.com/profile.php?id=100070939456361">
            <img
              src="@/assets/img/Shape 4.png"
              alt="" />
          </a>
          <!-- <a href="https://twitter.com/Promocollection/">
            <img
              src="@/assets/img/Shape 5.png"
              alt="" />
          </a>
          <a href="https://www.youtube.com/channel/UCXHWdW0Khk-TNxjObLqi7Yg">
            <img
              src="@/assets/img/Shape 7.png"
              alt="" />
          </a> -->
          <a href="https://www.instagram.com/promocollectioneu/">
            <img
              src="@/assets/img/Shape 21.png"
              alt="" />
          </a>
          <a href="https://www.linkedin.com/company/promocollection-uk/?viewAsMember=true">
            <img src="@/assets/img/linkin.png" alt="">
          </a>
        </div>
        <div class="contact">
          <div>(+44)203 916 5098</div>
          <div>info@promocollection.uk</div>
        </div>
        <div class="flex icon-wrap">
          <img
            src="@/assets/img/footer/uk_foot3.jpg"
            height="68.4"
            width="143"
            style="margin-right: 20px" />
          <img
            src="@/assets/img/footer/uk_foot4.png"
            height="68.4"
            width="68.4"
            style="margin-right: 20px" />
          <img
            src="@/assets/img/footer/uk_foot5.png"
            height="64.82"
            width="204" />
        </div>
        <div class="footer-bottom-item-right">
          {{ indexConfigWebsite.version_info }}
        </div>
      </div>
    </div>
    <dialog-XX-success
      :imgShow="false"
      :visible.sync="xxContentVisible"
      :desc="xxDesc"></dialog-XX-success>
  </footer>
</template>

<script>
import { mapMutations } from 'vuex'
import dialogXXSuccess from './DIalogXXSuccess.vue'

export default {
  components: { 'dialog-XX-success': dialogXXSuccess },

  data() {
    return {
      footerBannerList: [],
      productList: [],
      indexConfigWebsite: [],
      aboutUsArticle: {},
      flag_scroll: false,
      scroll: 0,
      xxContentVisible: false,
      xxDesc: '',
    }
  },
  async fetch() {
    await this.$axios
      .post('/uk-api/home/indexBanner', { type: 6 })
      .then(res => {
        this.footerBannerList = res.result.data
        // this.$store.commit("config/setConfigInfo", res.result);
      })
    await this.$axios.post('/uk-api/home/indexConfigWebsite', { site: 1 }).then(res => {
      this.indexConfigWebsite = res.result
      this.$store.commit('config/setConfigInfo', res.result)
    })
    await this.$axios.post('/uk-api/common/shopProductList').then(res => {
      this.productList = res.result
    })
    await this.$axios
      .post('/uk-api/home/articleList', { keyword: 'About us' })
      .then(res => {
        this.aboutUsArticle = res.result.data[0]
      })
  },
  computed: {
    audit_status() {
      return this.$store.state.userInfo?.audit_status === 1
    },
    isLogin() {
      return !!this.$store.state.userInfo?.email
    },
  },
  methods: {
    ...mapMutations('config', ['setConfigInfo']),
    ...mapMutations(['openDialog']),

    backTop() {
      var timer = setInterval(function () {
        document.documentElement.scrollTop -= 20
        if (document.documentElement.scrollTop <= 0) {
          clearInterval(timer)
        }
      }, 10)
    },
    handleScroll() {
      const scrollobj =
        document.body.scrollTop + document.documentElement.scrollTop
      if (scrollobj > 500) {
        this.flag_scroll = true
      } else {
        this.flag_scroll = false
      }
    },
    openLoginDialog() {
      if (this.$utils.checkLogin()) {
        this.$router.push({
          name: 'news-newsName',
          params: { newsName: 'About-Us' },
        })
      } else {
        this.openDialog()
      }
    },
    goApiWord() {
      if (this.isLogin) {
        if (this.$store.state.userInfo.open_platform) {
          const { href } = this.$router.resolve({
            name: 'home-api',
          })
          window.open(href, '_black')
        } else {
          this.submitLoading = false
          this.xxContentVisible = true
          this.xxDesc =
            'If you encounter difficulties, please contact info@promocollection.uk'
          // this.$message.error(
          //   'If you encounter difficulties, please contact info@promocollection.uk'
          // )
        }
      } else {
        this.openDialog()
      }
    },
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll, true)
  },
  destroyed() {
    window.removeEventListener('scroll', this.scrollToTop)
  },
}
</script>

<style lang="scss" scoped>
footer {
  line-height: 0;
  margin-top: 15px;
  font-family: Proxima Nova;
  .footer-top {
    position: relative;
    .footer-banner {
      width: 100%;
      height: 500px;
    }
    .top-item {
      position: absolute;
      top: 160px;
      left: 20%;
      p:first-of-type {
        width: 360px;
        height: 66px;
        font-size: 36px;
        font-weight: bold;
        color: #ffffff;
        line-height: 33px;
        margin-bottom: 18px;
      }
      p:nth-of-type(2) {
        width: 400px;
        height: 38px;
        font-size: 16px;
        font-weight: 400;
        color: #8290a1;
        line-height: 20px;
        margin-bottom: 16px;
      }
      .btn {
        width: 172px;
        height: 50px;
        line-height: 50px;
        border-radius: 6px;
        font-size: 14px;
        font-family: Proxima Nova;
        font-weight: bold;
        color: #ffffff;
        text-transform: uppercase;
        border: none;
        cursor: pointer;
        margin-right: 16px;
        text-align: center;
        a {
          display: block;
          width: 100%;
          color: #ffffff;
        }
      }
      .btn-red {
        background: #e90000;
      }
      .btn-blue {
        background: #0b6dc9;
      }
    }
  }
  .footer-middle {
    max-width: 1400px;
    .middle {
      display: flex;
      justify-content: space-around;
      background: url('@/assets/img/Shape 28.png') no-repeat;
      height: 377px;
      .footer-middle-item {
        width: 100%;
      }
    }
    .middle-item-left {
      margin-right: 10px;
      img {
        width: 241px;
        height: 65px;
      }
      p {
        max-width: 465px;
        font-size: 12px;
        font-weight: 400;
        color: #4a596c;
        line-height: 24px;
        margin-left: 20px;
        margin-top: 15px;
      }
    }
    .middle-item-right {
      display: flex;
      justify-content: space-around;
      margin-top: 35px;
      .item-menu {
        &:nth-child(2) {
          margin-left: 80px;
        }
        &:last-child {
          margin-left: 35px;
        }
        height: 172px;
        .item-title {
          white-space: nowrap;
          height: 20px;
          line-height: 20px;
          font-size: 14px;
          font-weight: bold;
          color: #000000;
          padding-bottom: 5px;
        }
        .item-line {
          width: 40px;
          height: 2px;
          background: #e90000;
        }
        .item-content {
          margin-top: 20px;
          height: 104px;
          div {
            height: 100%;
            a,
            .item-content-a {
              white-space: nowrap;
              display: block;
              // width: 120px;
              height: 20px;
              line-height: 20px;
              font-size: 0.87rem;
              font-weight: 400;
              color: #4a596c;
              padding-bottom: 5px;
              cursor: pointer;
              &:hover {
                color: #006dc9;
              }
            }
            ul {
              display: flex;
              justify-content: flex-start;
              flex-wrap: wrap;
              width: 200px;
              li {
                &:nth-child(even) {
                  a {
                    width: 80px;
                  }
                }
                &:nth-child(odd) {
                  a {
                    width: 120px;
                  }
                }
                a {
                  display: inline-block;
                  height: 20px;
                  line-height: 20px;
                  // font-size: 12px;
                  font-size: 0.87rem;
                  font-weight: 400;
                  color: #4a596c;
                  padding-bottom: 5px;
                  cursor: pointer;
                }
              }
            }
          }
        }
      }
    }
    .goTop {
      width: 1.6cm;
      height: 1.6cm;
      position: fixed;
      z-index: 2;
      bottom: 2cm;
      right: 12px;
      cursor: pointer;
      img {
        width: 100%;
      }
    }
  }
  .footer-bottom {
    width: 100%;
    background-color: #f1f4f9;
    font-size: 12px;
    line-height: 14px;
    font-weight: 400;
    color: #4a596c;
    .contact div {
      margin-bottom: 6px;
    }
    .icon-wrap {
      padding: 0 4px;
    }
    .footer-bottom-item {
      padding: 4px;
      min-height: 130px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      .footer-bottom-item-left {
        padding: 0 10px 0 0;
        a {
          cursor: pointer;
          img {
            width: 19px;
            height: 20px;
            margin-left: 24px;
          }
        }
      }
    }
  }
}
</style>