app-AgricultureSmart/uniapp/components/my-userinfo/my-userinfo.vue

<template>
    <view class="home-page">
      <view class="head">
        <image src="/static/home/BG.jpg" class="bgImg"></image>
        <view class="top-info">
          <view class="avatar">
            <image :src="getAvatarUrl()"></image>
          </view>
          <view class="user-info" style="transform: translateX(-20%)">
            <view class="username">{{ getUserName() }}</view>
            <view class="vip-info">4月会员特权已到期,去续费</view>
          </view>
          <view class="setting" @click="navigateToSettingPage">
<!--            <image src="/static/setting.png"></image>-->
            <van-icon name="setting-o" size="25"></van-icon>
          </view>
        </view>
        <view class="first-panel">
          <view class="panel-item">
            <van-icon name="star-o" size="25"></van-icon>
            <text>收藏</text>
          </view>
          <view class="panel-item">
            <van-icon name="balance-o" size="25"></van-icon>
            <text>红包</text>
          </view>
          <view class="panel-item">
            <van-icon name="paid" size="25"></van-icon>
            <text>卡券</text>
          </view>
          <view class="panel-item">
            <van-icon name="cash-o" size="25"></van-icon>
            <text>余额</text>
          </view>
        </view>
      </view>
\    <view class="panel-list" style="margin-top: 20px ;transform: translateY(68%)">
      <!-- 第2个面板 -->
      <view class="panel">
        <view class="panel-title" style="font-family: 'Montserrat', sans-serif;font-weight: bolder">我的订单</view>
        <view class="panel-body">
          <view class="panel-item" @click="toOrders(StaticState().ORDER.ALL)">
            <van-icon name="gold-coin-o" size="28"/>
            <text>代付款</text>
          </view><view class="panel-item" @click="toOrders(StaticState().ORDER.UNRECEIVE)">
          <van-icon name="gift-card-o" class="icon" size="30"/>
          <text>代收货</text>
        </view><view class="panel-item" @click="toOrders(StaticState().ORDER.REFUND)">
          <van-icon name="cash-back-record-o" class="icon" size="29"/>
          <text>退款/退货</text>
        </view><view class="panel-item" @click="toOrders(StaticState().ORDER.UNCOMMENT)">
          <van-icon name="records-o" class="icon" size="26"/>
          <text>待评价</text>
        </view>

        </view>
      </view>
      <!-- 第3个面板 -->
      <view class="panel">
        <view class="panel-list-item">
          <text>收货地址</text>
          <van-icon type="arrowright" size="15"></van-icon>
        </view>
        <view class="panel-list-item">
          <text>联系客服</text>
          <van-icon type="arrowright" size="15"></van-icon>
        </view>
        <view class="panel-list-item" @click="logout">
          <text>退出登录</text>
          <van-icon type="arrowright" size="15"></van-icon>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
import {mapState,mapMutations,mapGetters} from 'vuex'
import {StaticState} from "@/store/StaticState";
export default {
  name: "my-userinfo",
  data() {
    return {

    };
  },
  computed: {
  },
  methods: {
    StaticState,
    navigateToSettingPage() {
      uni.navigateTo({
        url: '/subpkg/setting/setting'
      })
    },
    ...mapGetters('m_user', ['getUserName','getAvatarUrl']),
    ...mapMutations('m_user', ['updateUserInfo','updateToken']),
    test() {
      console.log(1, "test");
    },
    beforeMount() {
      console.log(1, "beforeMount");
    },
    toOrders(pagetype) {
      // console.log('----------------------')
      // console.log(this.StaticState)
      // console.log(this.StaticState.ORDER)
      // console.log('toLogin')
      let self =this
      console.log(pagetype,"这是我传参的参数")
      uni.navigateTo({
        url: '/subpkg/order/order?pagetype=' + pagetype ,// 跳转至 subpkg 中的 selShop 页面
        success() {
          console.log('url跳转成功')
          setTimeout(() => {

          }, 500); // 延迟 1000 毫秒（即 1 秒）后调用 getToken() 函数
        },
        fail() {
          console.log('url跳转失败')
        }
      });
    },
    logout() {
      uni.showModal({
        title: '提示',
        content: '是否要退出登录',
        success: (res) => {
          if (res.confirm) {
            uni.removeStorageSync('token');
            this.updateToken('')
            //下一帧执行
            uni.reLaunch({
              url: '/pages/home/home'
            })

          }
        }
      })
    }
  }
};
</script>

<style lang="scss">

.bgImg{
  position: absolute;
  width: 100%;
  //left: 2.5%;
  //top: 1%;
}












.panel-list{
  padding: 0 10px;
  position: relative;
  top: -10px;
  .panel{
    background-color: white;
    border-radius: 10px;
    margin-bottom: 8px;
    .panel-title{
      line-height: 40px;
      padding-left: 10px;
      font-size: 15px;
      border-bottom: 1px solid #f4f4f4;
    }
    .panel-body{
      display: flex;
      justify-content: space-around;
      .panel-item{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        padding: 10px 0;
        font-size: 13px;
        .icon{
          width: 35px;
          height: 35px;
        }
      }
    }
  }
  //.panel:nth-child(1){
  //  margin-top: 10px;
  //  border-radius: 10px;
  //}
}

.panel-list-item{
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
  padding: 0 10px;
  line-height: 45px;

}



.home-page {
  .head {
    position: relative;
    .bgImg {
      top: 0;
      width: 100%;
      height: 400rpx;
    }
    .top-info {
      position: absolute;
      top: 60rpx;
      left: 30rpx;
      right: 30rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .avatar {
        image {
          width: 120rpx;
          height: 120rpx;
          border-radius: 50%;
        }
      }
      .user-info {
        .username {
          font-size: 36rpx;
          font-weight: bold;
        }
        .vip-info {
          font-size: 24rpx;
          color: #999;
        }
      }
      .setting {
        image {
          width: 50rpx;
          height: 50rpx;
        }
      }
    }
    .first-panel {
      position: absolute;
      bottom: -350rpx;
      left: 50%;
      transform: translateX(-50%);
      //transform: translateY(50%);
      display: flex;
      justify-content: space-around;
      width: 95%;
      background-color: #fff;
      border-radius: 20rpx;
      padding: 20rpx 0;
      box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
      .panel-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 24rpx;
        image {
          width: 50rpx;
          height: 50rpx;
        }
        text {
          margin-top: 10rpx;
        }
      }
    }
  }
}
</style>