h5-dangjian/src/pages/myHome/Index.vue

<template>
  <div id="myHome" class="app">
    <van-sticky :offset-top="0">
      <van-nav-bar title="我的" />
    </van-sticky>
    <div class="userData">
      <van-image
        class="bannerImage"
        round
        fit="cover"
        :src="require('../../assets/image/partySchool.jpg')"
      />
      <div class="user">
        <p class="userName" v-text="userInfo.userName || '游客'"></p>
        <p class="van-ellipsis userSubName">积分：{{ userInfo.score }}</p>
      </div>
    </div>
    <van-cell-group>
      <van-cell
        title="我的支部"
        @click="() => toUrl('myPartybranch')"
        clickable
        is-link
      />
      <!-- <van-cell title="消息" @click="() => toUrl('news')" clickable is-link /> -->
      <van-cell
        title="收藏"
        @click="() => toUrl('collection')"
        clickable
        is-link
      />
      <van-cell
        title="历史记录"
        @click="() => toUrl('integral')"
        clickable
        is-link
      />
      <van-cell title="分享" @click="showShare = true" clickable is-link />
      <van-cell title="关于" @click="() => toUrl('about')" clickable is-link />
      <!-- <van-cell title="设置" @click="() => toUrl('5')" clickable is-link /> -->
    </van-cell-group>
    <van-share-sheet
      v-model="showShare"
      title="立即分享给好友"
      :options="options"
      @select="onSelect"
    />
  </div>
</template>

<script>
import { getUserInfo, setUserInfo } from "@/utils/common.js";
import {
  NavBar as vanNavBar,
  Sticky as vanSticky,
  Image as VanImage,
  Cell as vanCell,
  CellGroup as vanCellGroup,
  ShareSheet as vanShareSheet
} from "vant";
import "vant/lib/cell-group/style";
import "vant/lib/nav-bar/style";
import "vant/lib/share-sheet/style";
import "vant/lib/sticky/style";
import "vant/lib/image/style";
import "vant/lib/cell/style";
import { getUser } from "@/api/user/user.js";
export default {
  name: "app",
  data: function() {
    return {
      userInfo: {},
      showShare: false,
      options: [
        { name: "微信", icon: "wechat" },
        { name: "微博", icon: "weibo" },
        { name: "复制链接", icon: "link" }
      ]
    };
  },
  methods: {
    toUrl(id) {
      if (!isNaN(Number(id))) return;
      window.parent
        ? (window.parent.location = id + ".html")
        : (location = id + ".html");
    },
    onSelect() {
      this.showShare = false;
    }
  },
  mounted() {
    this.userInfo = getUserInfo();
    getUser().then(res => {
      this.userInfo.score = (res || {}).score;
      setUserInfo({
        userName: this.userInfo.userName,
        score: this.userInfo.score
      });
    });
  },
  beforeDestroy: function() {},
  components: {
    vanNavBar,
    vanSticky,
    vanCell,
    vanCellGroup,
    VanImage,
    vanShareSheet
  }
};
</script>
<style lang="scss" scoped>
#myHome {
  .userData {
    padding: 1em;
    .bannerImage {
      width: 3em;
      height: 3em;
      margin-right: 1em;
      vertical-align: middle;
    }
    .user {
      display: inline-block;
      vertical-align: middle;
      font-size: 0.2rem;
      .userSubName {
        margin-top: 0.5em;
        font-size: 0.12rem;
        color: #aab3ba;
      }
    }
  }
}
</style>