bocai_supplyChain_pc/src/components/userinfo/usercenter/index.vue

<template>
  <div class="usercenter-container">
    <div class="usercontent w">
      <div class="leftlist">
        <div class="userbaseinfo">
          <ul>
            <li
              @click="pushto('/userinfo/usercenter/townsman')"
              :class="{ tagactive: activelist === 1 }"
            >
              <span><i class="iconfont icon-laoxiang"></i>我的老乡</span
              ><i class="iconfont icon-youjiantou"></i>
            </li>
            <li
              @click="pushto('/userinfo/usercenter/mybill')"
              :class="{ tagactive: activelist === 2 }"
            >
              <span><i class="iconfont icon-gongdan"></i>我的工单</span
              ><i class="iconfont icon-youjiantou"></i>
            </li>
          </ul>
        </div>
        <div class="priceinfo">
          <ul>
            <li
              @click="pushto('/userinfo/usercenter/myintegral')"
              :class="{ tagactive: activelist === 3 }"
            >
              <span><i class="iconfont icon-jifen"></i>我的积分</span
              ><span
                ><span>5000分</span><i class="iconfont icon-youjiantou"></i
              ></span>
            </li>
            <li
              @click="pushto('/userinfo/usercenter/mycard')"
              :class="{ tagactive: activelist === 4 }"
            >
              <span><i class="iconfont icon-kaquan"></i>我的卡券</span
              ><span
                ><span>3张</span><i class="iconfont icon-youjiantou"></i
              ></span>
            </li>
            <li
              @click="pushto('/userinfo/usercenter/mybalance')"
              :class="{ tagactive: activelist === 5 }"
            >
              <span><i class="iconfont icon-yue"></i>我的余额</span
              ><span
                ><span>999.00元</span><i class="iconfont icon-youjiantou"></i
              ></span>
            </li>
          </ul>
        </div>
      </div>
      <div class="rightcontent">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  // 组件名称
  name: "",
  // 局部注册的组件
  components: {},
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data() {
    return {
      activelist: "",
      // path:,
    };
  },
  // 计算属性
  computed: {
    path() {
      return this.$route.fullPath;
    },
  },
  // 侦听器
  watch: {
    path() {
      this.listactive();
    },
  },
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {
    this.listactive();
  },
  /**
   * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
   */
  mounted() {},
  // 组件方法
  methods: {
    pushto(url) {
      this.$router.push(url);
    },
    listactive() {
      console.log(this.path);
      console.log(1);
      if (this.path.indexOf("/townsman") > -1) {
        this.activelist = 1;
      } else if (this.path.indexOf("/mybill") > -1) {
        this.activelist = 2;
      } else if (this.path.indexOf("/myintegral") > -1) {
        this.activelist = 3;
      } else if (this.path.indexOf("/mycard") > -1) {
        this.activelist = 4;
      } else if (this.path.indexOf("/mybalance") > -1) {
        this.activelist = 5;
      }
    },
  },
};
</script>

<style scoped lang="less">
.tagactive {
  background-color: #ff6a00 !important;
  color: #fff !important;
  span {
    span {
      color: #fff !important;
    }
    i {
      color: #fff !important;
    }
  }
  i {
    color: #fff !important;
  }
}
.usercontent {
  // height: 1000px;
  margin-top: 16px;
  // background-color: pink;
  display: flex;
  .leftlist {
    width: 346px;
    // height: 500px;
    // background-color: skyblue;
    margin-right: 16px;
    .userbaseinfo {
      ul {
        // padding-left: 50px;
        background-color: #fff;
        border-radius: 4px;
        overflow: hidden;
        li {
          position: relative;
          display: flex;
          padding: 16px;
          line-height: 24px;
          justify-content: space-between;
          background-color: #fff;
          // border-bottom: 1px solid #f3f4f4;
          cursor: pointer;
          &:nth-child(1):after {
            position: absolute;
            content: "";
            display: inline-block;
            height: 1px;
            width: 314px;
            bottom: 0;
            left: 16px;
            background-color: #f3f4f4;
          }
          span {
            font-size: 16px;
            i {
              margin-right: 12px;
              font-size: 20px;
            }
          }
          > i {
            color: #888;
            font-size: 22px;
          }
        }
      }
    }
    .priceinfo {
      ul {
        margin-top: 16px;
        // padding: 0 16px;
        background-color: #fff;
        border-radius: 4px;
        overflow: hidden;
        li {
          position: relative;
          display: flex;
          padding: 16px 16px 16px 16px;

          line-height: 24px;
          justify-content: space-between;
          // border-bottom: 1px solid #f3f4f4;
          cursor: pointer;
          &:nth-child(-n + 2):after {
            position: absolute;
            content: "";
            display: inline-block;
            height: 1px;
            width: 314px;
            bottom: 0;
            left: 16px;
            background-color: #f3f4f4;
          }
          span:first-of-type {
            font-size: 16px;
            i:first-of-type {
              margin-right: 12px;
              font-size: 20px;
              vertical-align: middle;
            }
          }
          span:last-of-type {
            span {
              color: #999999;
              font-size: 14px;
            }
            i {
              color: #888;
              font-size: 22px;
              vertical-align: middle;
            }
          }
        }
      }
    }
  }
  .rightcontent {
    width: 838px;
    // height: 600px;
    padding: 0 16px;
    background-color: #fff;
  }
}
</style>