js-life/src/pages/index/components/user.vue

<template>
  <scroll-view scroll-y class="content">
    <view class="top">
      <view class="avabox">
        <van-image
          round
          class="img"
          width="200rpx"
          height="200rpx"
          :src="userData.headImage"
        />
        <view class="avatitbox">
          <text>{{ userData.nickName }}</text>
          <text v-if="userData.gzptUserId">{{ studentInfo.logincode }}</text>
          <view class="sync-btn" @tap="getUserProfile"
            >点击同步用户头像昵称</view
          >
        </view>
      </view>
    </view>

    <view class="serviceBox">
      <view class="tit">
        <text>我的服务</text>
      </view>
      <view class="btnBox">
        <button
          class="item-box"
          :plain="true"
          @click="$utils.goPage('/pages/user/order')"
        >
          <van-icon name="/static/imgs/order-icon.png" size="22px" />
          <text class="text">我的订单</text>
        </button>
        <button
          class="item-box"
          :plain="true"
          @click="$utils.goPage('/pages/user/collectionList')"
        >
          <van-icon name="/static/imgs/wdsc.png" size="22px" />
          <text class="text">我的收藏</text>
        </button>
        <button
          class="item-box"
          :plain="true"
          @click="$utils.goPage('/pages/user/browserecord')"
        >
          <van-icon name="/static/imgs/llzj.png" size="22px" />
          <text class="text">浏览足迹</text>
        </button>
        <button class="item-box" :plain="true" open-type="feedback">
          <van-icon name="/static/imgs/yjfk.png" size="22px" />
          <text class="text">意见反馈</text>
        </button>
      </view>
    </view>

    <view class="serviceBox">
      <view class="tit">
        <text>我的信息</text>
      </view>
      <van-cell
        title="我的设置"
        icon="/static/imgs/wdsz.png"
        is-link
        @tap="$utils.goPage('/pages/user/set')"
      />
      <button class="server" open-type="contact" :plain="true">
        <van-cell title="联系客服" icon="/static/imgs/lxkf.png" is-link />
      </button>
    </view>

    <view class="ad-box serviceBox">
      <ad unit-id="adunit-d8c1548cc9663765"></ad>
    </view>
  </scroll-view>
</template>

<script>
import { updateUserInfo } from "@/api/login.js";
export default {
  computed: {
    userData() {
      return this.$store.state.user.userInfo;
    },
  },
  mounted() {
    this.$store.dispatch("GetInfo");
  },
  methods: {
    async getUserProfile(e) {
      let userInfo = await wx.getUserProfile({
        desc: "业务需要",
      });
      let updateRes = await updateUserInfo({
        headImage: userInfo.userInfo.avatarUrl,
        nickName: userInfo.userInfo.nickName,
      });
      if (updateRes.code == 200) {
        this.$store.state.user.userInfo.headImage = userInfo.userInfo.avatarUrl;
        this.$store.state.user.userInfo.nickName = userInfo.userInfo.nickName;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  height: 100%;
}

.ad-box {
  margin: 40rpx;
  padding: 20rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.top {
  padding-top: 100rpx;
  background-image: url("/static/imgs/bg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;

  .avabox {
    display: flex;
    padding: 10%;

    .img {
      border-radius: 50%;
    }

    .sync-btn {
      margin-top: 20rpx;
      height: 40rpx;
    }

    .avatitbox {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 30rpx;
      color: #ffffff;
      height: 100rpx;
    }
  }
}

.serviceBox {
  background-color: #fff;
  margin: 30rpx;
  border-radius: 10rpx;

  .tit {
    padding: 26rpx;
    border-bottom: 1rpx solid #e8e8e8;
  }

  .btnBox {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .item-box {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      width: 200rpx;
      margin-top: 20rpx;
      padding: 20rpx;
      border: none;

      .text {
        font-size: 26rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #666666;
      }
    }
  }

  .server {
    border: none;
    background-color: none;
    margin: 0;
    padding: 0;
    text-align: left;
    display: flexbox;
  }
}
</style>