JDD-WXCP/pages/order/index.vue

<template>

  <div class="point-index">
  
    <div class="background">
      <div class="avatar">
        <img :src="userInfo.headimgurl" alt="" />
      </div>
      <div class="name">{{userInfo.nickname}}</div>
    </div>
    <div class="container">
      <div class="banner"></div>
      <div class="menu">
        <router-link to="/charge/amount" class="item">
          <div>
            <div class="icon"></div>
            <div class="text">余额明细</div>
          </div>
          <div class="go">></div>
        </router-link>
        <router-link to="/point/bill" class="item">
          <div>
            <div class="icon"></div>
            <div class="text">积分明细</div>
          </div>
          <div class="go">></div>
        </router-link>
        <router-link to="/point/list" class="item">
          <div>
            <div class="icon"></div>
            <div class="text">积分订单</div>
          </div>
          <div class="go">></div>
        </router-link>
        <!--
        <div class="item">
          <div>
            <div class="icon"></div>
            <div class="text">积分商城</div>
          </div>
          <div class="go">></div>
        </div>
        <div class="item">
          <div>
            <div class="icon"></div>
            <div class="text">今日油价</div>
          </div>
          <div class="go">></div>
        </div>
        -->
      </div>
    </div>
    
  </div>
</template>

<script>
import ProductList from "../../components/ProductList";
import { mapState, mapActions,mapGetters } from "vuex";
export default {
  head() {
    return {
      title: "个人中心",
    };
  },
  data() {
    return {
      images: [],
      list: [],
      loading: false, // 加载状态
      finished: false, // 是否完成加载
      refreshing: false, // 是否正在上拉刷新
    };
  },
  components: {
    ProductList,
  },
  computed: {
    ...mapGetters({
      userInfo: "authen/userInfo",
    }),
    ...mapState({
      pointInfo: (state) => state.point.pointInfo,
    }),
  },
  mounted() {
    // this.getPointInfo();
    console.log(this.userInfo)
  },
  methods: {
    ...mapActions({
      getPointInfo: "point/getPointInfo",
    }),
  },
};
</script>

<style>
.point-index {
  position: relative;
}
.point-index .background {
  background-color: #f3b335;
  width: 7.5rem;
  height: 49.46vw;
  position: relative;
  background: url("../../static/personal/bj@2x.png") no-repeat 0px 0px;
  background-size: 100% 100%;
  z-index: -1;
}

.point-index .background .avatar {
  width: 1.1rem;
  height: 1.1rem;
  position: absolute;
  top: 0.44rem;
  left: 0.3rem;
}

.point-index .background .avatar img {
  width: 100%;
  height: 100%;
  border-radius: 0.55rem;
}

.point-index .background .name {
  height: 0.45rem;
  font-size: 0.32rem;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #ffffff;
  line-height: 0.45rem;
  position: absolute;
  top: 0.75rem;
  left: 1.6rem;
}

.point-index .container {
  margin-top: -1.5rem;
  width: 100%;
  padding: 0 4vw;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  z-index: 99;
}

.point-index .container .banner {
  width: 100%;
  height: 26.66vw;
  background: #ffffff;
  box-shadow: 0px 2px 10px 5px rgba(227, 227, 227, 0.5);
  border-radius: 20px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  background: url("../../static/personal/banner@2x.png") no-repeat 0px 0px;
  background-size: 100% 100%;
}

.point-index .container .menu {
  display: flex;
  flex-direction: column;
  margin-top: 0.4rem;
  width: 6.9rem;
  background: #ffffff;
  box-shadow: 0rem 0.02rem 0.07rem 0.05rem rgba(243, 243, 243, 0.5);
  border-radius: 0.14rem;
}

.point-index .container .menu .item {
  box-sizing: border-box;
  padding: 0.36rem 0.3rem;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #eeeeee;
}
.point-index .container .menu .item div {
  display: flex;
}
.point-index .container .menu .item div .icon {
  width: 0.45rem;
  height: 0.38rem;
  background: url("~static/personal/vip@2x.png") no-repeat 0px 0px;
  background-size: 100% 100%;
}
.point-index .container .menu .item:nth-child(2) div .icon {
  background: url("~static/personal/huiyuan-2@2x.png") no-repeat 0px 0px;
  background-size: 100% 100%;
}
.point-index .container .menu .item:nth-child(3) div .icon {
  background: url("~static/personal/bianpinghuatubiaosheji-@2x.png") no-repeat
    0px 0px;
  background-size: 100% 100%;
}
.point-index .container .menu .item:nth-child(4) div .icon {
  background: url("~static/personal/jifen@2x.png") no-repeat 0px 0px;
  background-size: 100% 100%;
}
.point-index .container .menu .item:nth-child(5) div .icon {
  background: url("~static/personal/youjia@2x.png") no-repeat 0px 0px;
  background-size: 100% 100%;
}
.point-index .container .menu .item div .text {
  height: 0.4rem;
  font-size: 0.28rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #111111;
  line-height: 0.4rem;
  margin-left: 0.19rem;
}
.point-index .container .menu .item .go {
  color: #666666;
}
</style>