qj-happy-common-zhongjian 1.0.27

package/src/views/pc/default/footer-modules/footerDM.vue

@@ -0,0 +1,254 @@
+<template>
+  <footer class="bottom">
+    <div class="foo-pi">
+      <div v-html="footerInfo.proappEnvFoot"></div>
+    </div>
+  </footer>
+</template>
+
+<script>
+import api from '#/api/common/index';
+export default {
+  data() {
+    return {
+      footerData: [],
+      tginfoCode: [],
+    };
+  },
+  updated() {},
+  mounted() {
+    // this.getFooter();
+    this.getNew();
+  },
+  methods: {
+    getFooter() {
+      setTimeout(() => {
+        api.queryTginfoPageForCm().then((reg) => {
+          if (reg && reg.rows && reg.rows.length > 0) {
+            let setVal = window.localStorage.getItem('saas-proappcode');
+            this.tginfoCode =
+              reg.list &&
+              reg.list.filter((els) => {
+                return els.proappCode == setVal;
+              });
+            console.log(this.tginfoCode, window.localStorage.getItem('saas-tginfocode'), 'this.tginfoCode');
+            if ((this.tginfoCode && this.tginfoCode.length == 1) || window.localStorage.getItem('saas-tginfocode')) {
+              this.getNew();
+            } else {
+              this.$message.error('底部配置失败');
+            }
+          }
+        });
+      }, 100);
+    },
+    getNew() {
+      api
+        .queryTginfoMenuForAt({
+          tginfoCode: this.tginfoCode[0].tginfoCode ? this.tginfoCode[0].tginfoCode : window.localStorage.getItem('saas-tginfocode'),
+        })
+        .then((res) => {
+          this.footerData =
+            res &&
+            res.rows &&
+            res.rows.filter((el) => {
+              return el.menuOpcode != 'indexpcA';
+            });
+        });
+    },
+    hrefHandler(id) {
+      location.href = `/paas/pc-mall/index.html#/publicDetails?id=${id}`;
+    },
+  },
+  computed: {
+    footerInfo() {
+      let footerInfo = sessionStorage.getItem('proappEnvLayout') ? JSON.parse(sessionStorage.getItem('proappEnvLayout')) : null;
+      return footerInfo;
+    },
+  },
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.bottom {
+  width: 100%;
+  height: 198px;
+  background: white;
+  z-index: 9999;
+  border-top: 1px solid #f3f3f3;
+  .footer_base {
+    margin: 0 auto;
+    width: 1200px;
+    height: 159px;
+    .foo-bi {
+      margin: 0 auto;
+      width: 1200px;
+      > ul {
+        margin: 0 auto;
+        padding-top: 38px;
+        box-sizing: border-box;
+        .newBdin {
+          .newBbc {
+            > span {
+              font-weight: bold;
+              color: #333333;
+              font-size: 14px;
+              margin-bottom: 9px;
+              display: inline-block;
+            }
+          }
+        }
+        > li {
+          float: left;
+          width: 240px;
+          margin: 0;
+          text-align: center;
+          > ul {
+            margin-left: 22px;
+            > li {
+              //font-weight: bold;
+              color: #999999;
+              font-size: 14px;
+              padding-bottom: 8px;
+              > a {
+                color: #666666;
+                font-size: 12px;
+              }
+            }
+            > li:nth-child(2) {
+            }
+          }
+        }
+        > li:nth-child(6) {
+          border-left: 1px solid #f3f3f3;
+          padding: 32.5px 0 32.5px 8%;
+          box-sizing: border-box;
+          > span {
+            font-size: 12px;
+            float: left;
+            vertical-align: middle;
+            display: inline-block;
+            color: #333333;
+            > a {
+              color: #333333;
+              vertical-align: middle;
+              display: inline-block;
+              margin-right: 19px;
+            }
+            > i {
+              cursor: pointer;
+              margin-right: 12px;
+            }
+          }
+        }
+      }
+    }
+  }
+  .foo-pi {
+    width: 100%;
+    height: 38px;
+    > div {
+      padding: 10px 0;
+      border-top: 1px solid #f3f3f3;
+      font-size: 12px;
+      text-align: center;
+      color: #999999;
+    }
+  }
+}
+
+//right
+.maxx-flex {
+  display: none;
+  position: fixed;
+  bottom: 50%;
+  right: 50%;
+  z-index: 9999;
+  margin-bottom: -40px;
+  margin-right: -675px;
+  .maxx-icon {
+    > ul {
+      //width: 68px;
+      height: 100%;
+      background: rgba(245, 245, 245, 0);
+      .KaNop {
+        cursor: pointer;
+        width: 44px;
+        height: 44px;
+        line-height: 43px;
+        margin: 0 auto;
+        text-align: center;
+        background-color: #fafafa;
+        margin-bottom: 2px;
+        > a {
+          > i {
+            font-size: 20px;
+            color: #999999;
+          }
+        }
+        > a:hover {
+        }
+      }
+      .KaTwwop {
+        cursor: pointer;
+        width: 44px;
+        height: 44px;
+        //line-height: 43px;
+        margin: 0 auto;
+        text-align: center;
+        //opacity : 0.0015;
+        background-color: #fafafa;
+        margin-bottom: 2px;
+        position: relative;
+        > a {
+          > i {
+            font-size: 20px;
+            color: #999999;
+          }
+          .newTwop {
+            color: #666666;
+            position: absolute;
+            font-size: 12px;
+            display: inline-block;
+            top: 21px;
+            left: 1px;
+            width: 44px;
+          }
+        }
+      }
+    }
+  }
+}
+
+.bottom {
+  background: #f5f5f5;
+  height: auto;
+  padding-bottom: 10px;
+  .footer_base {
+    height: auto;
+    .foo-bi {
+      width: 1200px;
+      > ul > li {
+        width: 240px;
+        margin: 0 !important;
+        text-align: center;
+      }
+    }
+  }
+  .foo-pi {
+    margin-top: 20px;
+    li {
+      font-size: 13px;
+      a {
+        color: #666;
+      }
+      padding: 0 10px;
+      border-right: 1px solid #999;
+      height: 12px;
+      line-height: 12px;
+      &:last-child {
+        border-right: 0;
+      }
+    }
+  }
+}
+</style>

package/src/views/pc/default/footer-modules/footerDefault.vue

@@ -0,0 +1,267 @@
+<template>
+  <footer class="bottom">
+    <div class="footer_base auto">
+      <div class="foo-bi" v-if="footerData && footerData.length">
+        <ul class="clearfix">
+          <li class="newBdin" v-for="(item, index) in footerData" :key="index">
+            <div class="newBbc">
+              <i v-if="item.memo" :class="['iconfont', item.memo]"></i>
+              <span>{{ item.tginfoMenuName }}</span>
+            </div>
+            <ul>
+              <li v-for="(childItem, childIndex) in item.children" :key="childIndex">
+                <a @click="hrefHandler(childItem.menuOpcode)">{{ childItem.tginfoMenuName }}</a>
+              </li>
+            </ul>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div class="foo-pi">
+      <div>{{ $t('common.pc.default.footerModules.footer.footerDefault.record') }}</div>
+    </div>
+  </footer>
+</template>
+
+<script>
+import api from '#/api/common/index';
+export default {
+  data() {
+    return {
+      footerData: [],
+      tginfoCode: [],
+    };
+  },
+  updated() {},
+  mounted() {
+    this.getFooter();
+  },
+  methods: {
+    th(key) {
+      this.$th('common.pc.default.footerModules.footer.footerDefault.', key);
+    },
+    getFooter() {
+      setTimeout(() => {
+        api.queryTginfoPageForCm().then(reg => {
+          if (reg && reg.rows && reg.rows.length > 0) {
+            let setVal = window.localStorage.getItem('saas-proappcode');
+            this.tginfoCode =
+              reg.list &&
+              reg.list.filter(els => {
+                return els.proappCode == setVal;
+              });
+            console.log(this.tginfoCode, window.localStorage.getItem('saas-tginfocode'), 'this.tginfoCode');
+            if ((this.tginfoCode && this.tginfoCode.length == 1) || window.localStorage.getItem('saas-tginfocode')) {
+              this.getNew();
+            } else {
+              // this.$message.error('底部配置失败');
+            }
+          }
+        });
+      }, 100);
+    },
+    getNew() {
+      api
+        .queryTginfoMenuForAt({
+          tginfoCode: this.tginfoCode[0].tginfoCode ? this.tginfoCode[0].tginfoCode : window.localStorage.getItem('saas-tginfocode'),
+        })
+        .then(res => {
+          this.footerData =
+            res &&
+            res.rows &&
+            res.rows.filter(el => {
+              return el.menuOpcode != 'indexpcA';
+            });
+        });
+    },
+    hrefHandler(id) {
+      location.href = `/paas/pc-mall/index.html#/publicDetails?id=${id}`;
+    },
+  },
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.bottom {
+  width: 100%;
+  height: 198px;
+  background: white;
+  z-index: 9999;
+  border-top: 1px solid #f3f3f3;
+  .footer_base {
+    margin: 0 auto;
+    width: 1200px;
+    height: 159px;
+    .foo-bi {
+      margin: 0 auto;
+      width: 1200px;
+      > ul {
+        margin: 0 auto;
+        padding-top: 38px;
+        box-sizing: border-box;
+        .newBdin {
+          .newBbc {
+            > span {
+              font-weight: bold;
+              color: #333333;
+              font-size: 14px;
+              margin-bottom: 9px;
+              display: inline-block;
+            }
+          }
+        }
+        > li {
+          float: left;
+          width: 240px;
+          margin: 0;
+          text-align: center;
+          > ul {
+            margin-left: 22px;
+            > li {
+              //font-weight: bold;
+              color: #999999;
+              font-size: 14px;
+              padding-bottom: 8px;
+              > a {
+                color: #666666;
+                font-size: 12px;
+              }
+            }
+            > li:nth-child(2) {
+            }
+          }
+        }
+        > li:nth-child(6) {
+          border-left: 1px solid #f3f3f3;
+          padding: 32.5px 0 32.5px 8%;
+          box-sizing: border-box;
+          > span {
+            font-size: 12px;
+            float: left;
+            vertical-align: middle;
+            display: inline-block;
+            color: #333333;
+            > a {
+              color: #333333;
+              vertical-align: middle;
+              display: inline-block;
+              margin-right: 19px;
+            }
+            > i {
+              cursor: pointer;
+              margin-right: 12px;
+            }
+          }
+        }
+      }
+    }
+  }
+  .foo-pi {
+    width: 100%;
+    height: 38px;
+    > div {
+      padding: 10px 0;
+      border-top: 1px solid #f3f3f3;
+      font-size: 12px;
+      text-align: center;
+      color: #999999;
+    }
+  }
+}
+
+//right
+.maxx-flex {
+  display: none;
+  position: fixed;
+  bottom: 50%;
+  right: 50%;
+  z-index: 9999;
+  margin-bottom: -40px;
+  margin-right: -675px;
+  .maxx-icon {
+    > ul {
+      //width: 68px;
+      height: 100%;
+      background: rgba(245, 245, 245, 0);
+      .KaNop {
+        cursor: pointer;
+        width: 44px;
+        height: 44px;
+        line-height: 43px;
+        margin: 0 auto;
+        text-align: center;
+        background-color: #fafafa;
+        margin-bottom: 2px;
+        > a {
+          > i {
+            font-size: 20px;
+            color: #999999;
+          }
+        }
+        > a:hover {
+        }
+      }
+      .KaTwwop {
+        cursor: pointer;
+        width: 44px;
+        height: 44px;
+        //line-height: 44px;
+        margin: 0 auto;
+        text-align: center;
+        //opacity : 0.0015;
+        background-color: #fafafa;
+        margin-bottom: 2px;
+        position: relative;
+        > a {
+          > i {
+            font-size: 20px;
+            color: #999999;
+          }
+          .newTwop {
+            color: #666666;
+            position: absolute;
+            font-size: 12px;
+            display: inline-block;
+            top: 21px;
+            left: 1px;
+            width: 44px;
+          }
+        }
+      }
+    }
+  }
+}
+
+.bottom {
+  background: #f5f5f5;
+  height: auto;
+  padding-bottom: 10px;
+  .footer_base {
+    height: auto;
+    .foo-bi {
+      width: 1200px;
+      > ul > li {
+        width: 240px;
+        margin: 0 !important;
+        text-align: center;
+      }
+    }
+  }
+  .foo-pi {
+    margin-top: 20px;
+    li {
+      font-size: 13px;
+      a {
+        color: #666;
+      }
+      padding: 0 10px;
+      border-right: 1px solid #999;
+      height: 12px;
+      line-height: 12px;
+      &:last-child {
+        border-right: 0;
+      }
+    }
+  }
+}
+</style>