<!--
  @description: 帮助中心页
  @Modifier：dijia
  @routerPath: /helpCenter
  @date：2021-12-16 16:30:00
-->
<template>
  <div class="customer">
    <div class="banner_wrap">
      <div class="banner clearfix">
        <a href="#/shop/shopHome" class="logo fl">
          <img :src="WebConfig.imgMajor">
        </a>
        <ul class="uc-nav fl">
          <li>
            <router-link to="/shop/shopHome">
              我的首页
            </router-link>
          </li>
          <li>
            <router-link to="/personalCenter/accountInfo">
              我的账户
            </router-link>
          </li>
        </ul>
      </div>
    </div>
    <div class="autohe">
      <!-- 菜单 -->
      <div class="helpBoxLeft">
        <ul v-for="(item, index) in menuList" :key="index" class="helpTitleList">
          <div>{{ item.title }}</div>
          <li v-for="child in item.childrens" :key="child.id" :class="[activeLi === child.id?'on':'']">
            <a href="javascript:;" @click="activeLi = child.id">
              {{ child.name }}
            </a>
          </li>
        </ul>
      </div>
      <!-- 内容 -->
      <div class="helpBoxRight">
        <div v-if="activeLi===0" class="helpRText">
          <div class="helpRtitle">
            下载专区
          </div>
          <div class="CAprocess">
            <div class="downloadBox" style="margin-right: 8px;">
              <ul class="softBox">
                <i class="iconfont icon-shuangjiantou" />
                <h3>电子超市操作手册<span>更新时间：2021年12月15日</span></h3>
                <li><span>范围:</span>电子超市用户 </li>
                <li style="height: 70px;">
                  <span>介绍:</span>电子超市的操作手册相关文档。
                </li>
                <div id="bibSteward1">
                  <br>
                  <div class="download" style="right: 20px; bottom: 20px;">
                    <a
                      href="javascript:void(0)"
                      style="color:#fff;"
                      @click="downloadZip"
                    >立即下载</a>
                  </div>
                </div>
              </ul>
            </div>
          </div>
        </div>
        <div v-if="activeLi===1" class="helpRText">
          <div class="helpRtitle">
            常见问题
          </div>
          <div class="aboutUs" style="text-indent:0;">
            <b>1. </b> <b>登录账号或密码忘记，如何找回账号或密码？</b> <br>
            答：请点击登录页面的“忘记密码”，根据操作提示找回密码或拨打服务电话400-0809-508，选1号键。 <br>
            <b>2. </b> <b>投标人提交注册申请后，如何才能知道是否通过注册审核？</b><br>
            答：方式一：注册审核通过或驳回都会发送短信到用户注册时录入的手机上。<br>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;方式二：登录本平台，在用户中心查看是否审核通过。<br>
            <b>3. </b><b>关于注册信息被驳回主要有以下几个方面的问题： </b> <br>
            （1）未根据自己的角色选择对应的注册类型；<br>
            （2）上传相关扫描件或者上传的图片不清晰；<br>
            （3）录入的注册信息和上传的证件信息不一致；<br>
            （4）上传的扫描件如果为复印件无效，应该为原件或复印件加盖公章的原件扫描。<br>
            （5）银行账号及相关内容指的是银行开户许可证及上面的账号。<br>
            （6）银行账号不要加空格或-。<br>
            （7）组织机构代码证和税务登记证如果有字母请注意大小写。<br>
            （8）法人请与营业执照上法人相符。 <br>
            <b>4. </b><b>在哪报名项目，报名后怎么知道审核结果。</b> <br>
            答：登陆后，在项目报名节点找到要报名项目，点击“进入报名”，填写报名信息后提交。<br>
            <b>5. </b><b>我从哪里购买标书？ </b><br>
            答：
            方式一：登录本平台，在报名投标节点，点击“缴纳标书费”，选择需要支付的标段填写支付信息后提交订单。&nbsp; <br>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;方式二：登录投标管家，在我参与的项目中，进入所要购买的项目，点击“购买文件”或，填写支付信息后提交订单。 <br>
            <b>6. </b><b>购买标书时，点击提交按钮后页面没反应怎么办？ </b> <br>
            答：点击浏览器工具—选项—广告过滤—例外排除，点击管理例外网站，把网站地址添加进去刷新即可。如果还无法支付，请记录页面提示并拨打服务电话400-0809-508，选1号键协助解决。 <br>
            <b>7. </b> <b>在哪里下载标书？ </b> <br>
            答：在线支付标书成功后，可根据以下两种方式下载标书。 <br>
            方式一：登录本平台，报名投标中的缴纳标书费节点，选择相关项目，点击后面操作项下的下载即可。 <br>
            方式二：投标管家，在采购文件处，购买后点击下载即可。
          </div>
        </div>
      </div>
    </div>
    <!-- footer -->
    <div class="footer">
      <div class="footer_wrap">
        <ul class="help">
          <li class="help_list">
            <img src="@/assets/img/shopmall/footer_01.png">
            <span>正品保障</span>
          </li>
          <li class="help_list">
            <img src="@/assets/img/shopmall/footer_02.png">
            <span>价格优惠</span>
          </li>
          <li class="help_list">
            <img src="@/assets/img/shopmall/footer_03.png">
            <span>双向信用</span>
          </li>
          <li class="help_list">
            <img src="@/assets/img/shopmall/footer_04.png">
            <span>售后无忧</span>
          </li>
        </ul>
        <div class="copyright">
          <div>
            {{ WebConfig.platform }}
            <!-- © 2019 国信创新科技股份有限公司 版权所有，不得转载       粤ICP备15076859号 -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
/* vuex*/
import { mapGetters } from 'vuex'
export default {
  name: 'HelpCenter',
  components: {},
  data() {
    return {
      // 菜单列表
      menuList: [
        { title: '新手入门', childrens: [{ name: '下载专区', id: 0 }] },
        { title: '常见问题', childrens: [{ name: '常见问题', id: 1 }] }
      ],
      // 激活的菜单
      activeLi: 0
    }
  },
  computed: {
    /* WebConfig 项目配置数据*/
    ...mapGetters(['WebConfig'])
  },
  created() {
  },
  methods: {
    // 下载电子超市文档
    downloadZip() {
      window.location.href = 'https://www.powerbeijing-ec.com/resource/downTools/电子超市操作手册.zip'
    }
  }
}
</script>

<style scoped lang="less">
.aboutUs {
  line-height: 30px;
  text-indent: 30px;
  font-size: 15px;
}
.CAprocess {
  overflow: hidden;
  line-height: 30px;
  font-size: 14px;
  .downloadBox {
    width: 49%;
    position: relative;
    float: left;
  }
  .softBox {
    border: 1px #eee solid;
    margin-top: 20px;
    padding: 20px;
    border-bottom: 2px #e0e0e0 solid;
    background: #f9f9f9;
    margin: 10px 0;
    overflow: hidden;
    > i {
      float: left;
      padding-right: 10px;
    }
    > li {
      line-height: 30px;
      font-size: 14px;
      color: #666;
      width: 80%;
      >span {
        padding-right: 10px;
        display: inline-block;
        color: #333;
      }
    }
    .download {
      position: absolute;
      overflow: hidden;
      margin: 10px 0 0 0;
      >a {
        background: #4c80d4;
        padding: 5px 10px;
        float: right;
        text-decoration: none;
      }
    }
  }
  h3 {
    padding: 0 0 0 30px;
    margin: 0 0 10px 0;
    border-bottom: 1px #eee solid;
    padding-bottom: 10px;
    position: relative;
    line-height: 30px;
    >span {
      position: absolute;
      right: 10px;
      font-size: 12px;
      font-weight: normal;
      color: #999;
    }
  }
}
.helpRText {
  padding: 10px 30px;
  font-size: 16px;
  .helpRtitle {
    margin: 30px 0px 0 0px;
    font-size: 24px;
    font-weight: normal;
    border-bottom: 1px #e0e0e0 solid;
    padding-bottom: 20px;
    margin-bottom: 30px;
  }
}
.helpTitleList {
  padding-bottom: 10px;
  > div {
    border-bottom: 1px #eee solid;
    border-top: 1px #eee solid;
    line-height: 40px;
    padding-left: 20px;
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 10px;
    background-color: #F9F9F9;
  }
  >li {
    line-height: 40px;
    padding-left: 30px;
    > a {
      padding-left: 15px;
    }
  }
  .on {
    a {
      color: #f16a32;
      font-weight: bold;
    }
  }
}
ul, li {
  margin: 0;
  padding: 0;
}
.helpBoxLeft {
  position: absolute;
  width: 200px;
  border: 1px solid #eee;
  border-top: none;
  background: #fff;
  left: 0;
  height: auto;
  min-height: 718px;
}
.helpBoxRight {
  width: 960px;
  border-right: 1px #eee solid;
  margin-left: 195px;
  background: #fff;
  border-left: 1px #e0e0e0 solid;
  border-bottom: 1px #eee solid;
  border-top: 1px #eee solid;
  height: auto;
  min-height: 718px;
}
.mid {
  padding: 5px 15px;
}
.footer {
  width: 100%;
  margin: 0 auto;
  background-color: #fff;
}
.autohe {
  max-width: 1366px;
  margin: 20px auto 20px;
  min-height: calc(100vh - 210px);
  overflow: auto;
  padding: 0 15px;
  position: relative;
}
.banner_wrap {
  background: @hyacinthine;
  padding: 14px;
}
.banner {
  max-width: 1366px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  color: #fff;
  .uc-nav {
    margin-left: 104px;
    li {
      width: 120px;
      float: left;
      height: 36px;
      line-height: 36px;
      padding: 0 15px;
      // border: 1px solid transparent;
      // border-bottom: 0;
    }
  }
  .myshoppingCart {
    width: 700px;
    display: flex;
    justify-content: flex-end;
    font-size: 18px;
    p {
      // border: 1px solid #ccc;
      width: 220px;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    i.iconfont {
      margin-right: 30px;
    }
  }
}
.customer {
  width: 100%;
  background: #f7f8fa;
  overflow: auto;
  height: 100vh;
}
.footer_wrap {
  max-width: 1250px;
  margin: 0 auto;
  // border-top: 1px solid #EEEEEE;
  .help {
    width: 100%;
    margin: 0 auto;
    padding: 20px 0;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    .help_list {
      padding-right: 80px;
      border-right: 1px solid #eeeeee;
      img {
        margin-left: 50px;
        margin-right: 20px;
      }
      &:last-child {
        border: none;
      }
    }
  }
  .copyright {
    color: #999;
    font-size: 12px;
    letter-spacing: 2px;
    text-align: center;
    height: 40px;
    line-height: 40px;
  }
}
</style>
