AyaoJies-boot/AyaoJies-app/source-mall-master/source-mall/pages/center/center.vue

<template>
  <view>
    <view class="top">
      <image class="u-bg" src="/static/bg/user.jpg"></image>
      <view class="user-wrapper">
        <u-avatar :src="avatar" class="avatar" size="140"></u-avatar>
        <view class="login-box" @click="setting">
          <view class="u-font-18 u-p-b-20">{{ vuex_user.user.nickName }}</view>
          <view class="u-font-14">{{ vuex_user.user.userName }}</view>
        </view>
      </view>
      <image class="arc-line" mode="aspectFill" src="/static/icon/arc.png"></image>
    </view>
    <view class="contain">
      <view class="top-nav">
        <u-row v-if="vuex_token">
          <u-col v-for="(item,index) in topNavList" :key="index" span="4" text-align="center">
            <view @click="clickNav(item.url)">
              <view class="tabNum">{{ item.num }}</view>
              <view class="tabName">{{ item.name }}</view>
            </view>
          </u-col>
        </u-row>
      </view>

      <view class="center-nav">
        <view class="order">
          <view class="left">我的订单</view>
          <view class="right">
            <text class="text" @click="orderList">查看全部</text>
            <u-icon color="#ddd" name="arrow-right" size="20"></u-icon>
          </view>
        </view>
        <u-row v-if="vuex_token">
          <u-col v-for="(item,index) in navList" :key="index" span="3" text-align="center">
            <view @click="clickNav(item.url)">
              <u-icon :name="item.icon" color="#ff536f" size="50"></u-icon>
              <view class="tabName">{{ item.name }}</view>
            </view>
          </u-col>
        </u-row>
      </view>
      <view v-if="vuex_token" class="cell-list">
        <view class="cell" @click="orderList">
          <view class="left">
            <u-icon color="#fa436a" name="clock" size="38"></u-icon>
            <text class="text">浏览历史</text>
          </view>
          <view class="right">
            <u-icon color="#ddd" name="arrow-right" size="30"></u-icon>
          </view>
        </view>
        <view class="cell" @click="code">
          <view class="left">
            <u-icon color="#5fcda2" name="integral" size="38"></u-icon>
            <text class="text">我的钱包</text>
          </view>
          <view class="right">
            <u-icon color="#ddd" name="arrow-right" size="30"></u-icon>
          </view>
        </view>
        <view class="cell" @click="address">
          <view class="left">
            <u-icon color="#ee883b" name="map" size="38"></u-icon>
            <text class="text">收货地址</text>
          </view>
          <view class="right">
            <u-icon color="#ddd" name="arrow-right" size="30"></u-icon>
          </view>
        </view>
        <view class="cell" @click="code">
          <view class="left">
            <u-icon color="#54b4ef" name="star" size="38"></u-icon>
            <text class="text">我的收藏</text>
          </view>
          <view class="right">
            <u-icon color="#ddd" name="arrow-right" size="30"></u-icon>
          </view>
        </view>
        <view class="cell" @click="problem">
          <view class="left">
            <u-icon color="#ee883b" name="question-circle" size="38"></u-icon>
            <text class="text">常见问题</text>
          </view>
          <view class="right">
            <u-icon color="#ddd" name="arrow-right" size="30"></u-icon>
          </view>
        </view>
        <view class="cell" @click="setting">
          <view class="left">
            <u-icon color="#37b0fb" name="setting" size="38"></u-icon>
            <text class="text">设置</text>
          </view>
          <view class="right">
            <u-icon color="#ddd" name="arrow-right" size="30"></u-icon>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import config from "@/common/config.js" // 全局配置文件
export default {
  data() {
    return {
      avatar: uni.getStorageSync('lifeData').vuex_user.user.avatar.includes(config.staticUrl) ? uni.getStorageSync('lifeData').vuex_user.user.avatar : config.staticUrl + uni.getStorageSync('lifeData').vuex_user.user.avatar,
      topNavList: [
        {name: "余额", num: "0", url: "/pages/detail/preHouse"},
        {name: "优惠卷", num: "0", url: "/pages/detail/preHouse"},
        {name: "积分", num: "0", url: "/pages/detail/preHouse"},
      ],
      navList: [
        {name: "待付款", icon: "red-packet", url: "/pages/order/order"},
        {name: "待发货", icon: "order", url: "/pages/order/order"},
        {name: "待收货", icon: "car", url: "/pages/order/order"},
        {name: "待评价", icon: "edit-pen", url: "/pages/order/order"}
      ],
    }
  },
  onLoad() {
    // 检查token
    this.checkToken();
    uni.$on('updateAvatar', (obj) => {
      // 获取数据
      this.updateAvatar();
    })
  },
  onUnload() {
    // 移除监听事件
    uni.$off('updateAvatar');
  },
  methods: {
    login() {
      this.$u.route('/pages/login/login')
    },
    logout() {
      // 登录成功修改token与用户信息
      this.$u.vuex('vuex_token', '');
      this.$u.vuex('vuex_user', {});
      this.$u.route('/pages/login/login')
    },
    setting() {
      this.$u.route('/pages/profile/setting')
    },
    //拨打固定电话
    callPhoneNumber() {
      uni.makePhoneCall({
        phoneNumber: "18720989281",
      });
    },
    problem() {
      this.$u.route({
        url: 'pages/login/problem'
      })
    },
    checkToken() {
      // 判断Token是否有效
      let lifeData = uni.getStorageSync('lifeData');
      let token = lifeData.vuex_token
      if (!token) {
        // 没有token 则跳转到登录
        return uni.reLaunch({
          url: '../login/login'
        })
      }
    },
    code() {
      this.$mytip.toast('敬请期待')
    },
    clickNav(url) {
      this.$u.route(url);
    },
    orderList() {
      this.$u.route('/pages/order/order')
    },
    address() {
      this.$u.route('/pages/address/address')
    },
    updateAvatar() {
      this.avatar = uni.getStorageSync('lifeData').vuex_user.user.avatar.includes(config.staticUrl) ? uni.getStorageSync('lifeData').vuex_user.user.avatar : config.staticUrl + uni.getStorageSync('lifeData').vuex_user.user.avatar
    }
  }
}
</script>

<style lang="scss">
.top {
  position: relative;
  overflow: hidden;
  padding-top: calc(var(--status-bar-height) + 52rpx);
  padding-bottom: 6 rpx;

  .u-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 330 rpx;
  }

  .user-wrapper {
    display: flex;
    flex-direction: column;
    flex-direction: row;
    align-items: center;
    position: relative;
    z-index: 5;
    padding: 20 rpx 30 rpx 60 rpx;
  }

  .login-box {
    font-size: 36 rpx;
    color: #fff;
  }

  .avatar {
    flex-shrink: 0;
    width: 130 rpx;
    height: 130 rpx;
    border-radius: 100px;
    margin-right: 24 rpx;
    border: 4 rpx solid #fff;
    background-color: #fff;
  }

  .username {
    font-size: 34 rpx;
    color: #fff;
  }

  .user-group {
    align-self: flex-start;
    padding: 10 rpx 16 rpx;
    margin-top: 16 rpx;
    font-size: 20 rpx;
    color: #fff;
    background-color: rgba(255, 255, 255, .3);
    border-radius: 100 rpx;
  }

  .arc-line {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 9;
    width: 100%;
    height: 32 rpx;
  }
}

.contain {
  padding: 10 rpx 20 rpx;

  .top-nav {
    background-color: #FFFFFF;
    padding: 30 rpx 0;
    border-radius: 8px;

    .tabNum {
      color: $u-main-color;
      font-size: 34 rpx;
      padding-top: 10 rpx;
      font-weight: 500;
    }

    .tabName {
      color: $u-tips-color;
      font-size: 22 rpx;
      padding-top: 10 rpx;
    }
  }

  .center-nav {
    margin-top: 20 rpx;
    background-color: #FFFFFF;
    padding: 30 rpx 0;
    border-radius: 8px;

    .order {
      padding: 10 rpx 30 rpx 40 rpx 30 rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .left {
        color: $u-main-color;
        font-size: 32 rpx;
        padding-top: 10 rpx;
        font-weight: 600;
      }

      .right {
        font-size: 22 rpx;
        color: $u-tips-color;

        .text {
          margin-right: 8 rpx;
        }
      }
    }

    .tabName {
      color: $u-tips-color;
      font-size: 26 rpx;
      padding-top: 10 rpx;
    }
  }

  .cell-list {
    background-color: #fff;
    margin-top: 20 rpx;
    padding-top: 20 rpx;

    .cell {
      padding: 20 rpx 30 rpx 40 rpx 30 rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .left {
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: $u-main-color;
        font-size: 30 rpx;

        .text {
          padding-left: 10 rpx;
        }
      }

      .right {
        font-size: 28 rpx;
        color: $u-tips-color;
      }
    }
  }
}
</style>