nherp-shop/pages/views/tabBar/user.vue

<template>
<view class="userbox" :class="['theme', themeObj.name]">
<!-- 头部个人信息 不变-->
<view class="userHeader">
  <image src="/static/images/user/user-bg.png" class="user_bg"></image>
  <view class="nav">
      <view class="user" @click="onLogin">
        <image :src="userdata.avatar" v-if="userdata.avatar"></image>
		<image src="../../../static/images/face.jpg" v-else></image>
		<view class="text">{{userdata.realname || '-'}}</view>
      </view>
  </view>
 <view class="vip">
        <image src="/static/images/user/vip-card.png" class="vip_bg"></image>
        <view class="vipname">
          <text class="iconfont icon-zuanshi zuanshi"></text>
         <text class="names">
            商城尊享会员
          </text>
          <text class="vip_level">会员</text>
        </view>
        <view class="banquan">
          商城版权所有©
        </view>
   </view>
</view>
<!-- 中间菜单栏 -->
<!-- #ifndef H5 -->
<view class="userMenu" @touchstart="coverTouchStart" @touchmove="coverTouchMove" @touchend="coverTouchEnd" :style="'transform:' + coverTransform + ';transition:' + coverTransition">
  <image src="/static/images/user/arc.png" class="arc"></image>
  <!-- 我的账户 -->
  <my-account :colors="colors"></my-account>
  <!-- 全部订单 -->
  <my-order :orderText="orderText" :colors="colors"></my-order>
  <!-- 我的足迹 -->
  <my-footprint :logList="logList" :colors="colors"></my-footprint>
  <!-- 我的服务 -->
  <my-server :serverList="serverList" :colors="colors" :userinfo="userdata"></my-server>
</view>
<!-- #endif -->
<!-- #ifdef H5 -->
<view class="userMenu" @touchmove.stop.prevent="moveHandle" @touchstart="coverTouchStart" @touchmove="coverTouchMove" @touchend="coverTouchEnd" :style="'transform:' + coverTransform + ';transition:' + coverTransition">
  <image src="/static/images/user/arc.png" class="arc"></image>
  <!-- 我的账户 -->
  <!-- <my-account :colors="colors"></my-account> -->
</view>
<view class="place" >
	<!-- 全部订单 -->
	<my-order :orderText="orderText" :colors="colors"></my-order>
	<!-- 我的足迹 -->
	<my-footprint :logList="logList" :colors="colors"></my-footprint>
	<!-- 我的服务 -->
	<my-server :serverList="serverList" :colors="colors"></my-server>
</view>
<!-- #endif -->
</view>
</template>

<script>
let app = getApp();
import { getConfig, getUserInfo,getToken, getGoodsHistory } from '@/utils/auth';
import myAccount from "../../commponent/user/my-account";
import listCell from "../../commponent/user/list-cell";
import myOrder from "../../commponent/user/my-order";
import myFootprint from "../../commponent/user/my-footprint";
import myServer from "../../commponent/user/my-server";
import { ORDER_NAVS } from '../../../config/order.js'
import { getStatusList } from '@/api/index.js'
export default {
  data() {
    return {
      colors: '',
	  themeObj: app.globalData.themeObj,
      startY: 0,
      //原始坐标
      moving: false,
      //当前元素的状态（是否移动）
      coverTransform: 'translateY(0px)',
      //元素的移动
      coverTransition: '0s',
      //动画效果
      orderText: ORDER_NAVS.slice(1),
      logList: [],
      serverList: [{
        name: '我的收藏',
        icon: 'icon-shoucang',
        url: '/pages/views/user/mycollection',
        id: 1,
        elseUrl: ''
      },
	  // {
   //      name: '地址管理',
   //      icon: 'icon-dizhi',
   //      url: '/pages/views/user/myaddress',
   //      id: 2,
   //      elseUrl: ''
   //    },
	  {
        name: '分销中心',
        icon: 'icon-fenxiao',
        url: '/pages/views/user/mydistribution',
        id: 6,
        elseUrl: ''
      }, {
        name: '分享',
        icon: 'icon-fenxiang1',
        url: '/pages/views/user/extension',
        id: 7,
        elseUrl: ''
      }, {
        name: '联系我们',
        icon: 'icon-kefu1',
        url: '/pages/views/user/contactUs',
        id: 8,
        elseUrl: ''
      }, {
        name: '设置',
        icon: 'icon-shezhi2',
        url: '/pages/views/setting/index',
        id: 9,
        elseUrl: ''
      }],
      oldcolor: '',
      userdata: {}
    };
  },

  components: {
    myAccount,
    listCell,
    myOrder,
    myFootprint,
    myServer
  },
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
		this.themeObj = app.globalData.themeObj
		uni.setTabBarStyle({
		   selectedColor: this.themeObj .color
		 });
		 this.themeObj .tabList.forEach((v, index) => {
			  uni.setTabBarItem({
				//设置tabBar 首页图标
				index: index,
				selectedIconPath: v
			  });
		 })
		if (!getToken()) {
			uni.navigateTo({
				url: '/pages/login/index1'
			})
		return
		}
		this.logList = getGoodsHistory()
		let colors = app.globalData.newColor;

		let oldcolor = this.colors;
		let userdata = getUserInfo() || {};
		this.userdata = userdata
		this.getOrderStatus()


	},

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {},

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {},

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {},
  methods: {
	  getOrderStatus() {
		  getStatusList({userId: getUserInfo().id}).then(res => {
			  const result = res.result
			    const obj = {
					'state6': result.unconfirmed,
			  	  state0: result.unpaid,
			  	  state1: result.notSend,
			  	  // state2: result.send,
			  	  // state3: result.complete,
			  	  // state4: result.other,
			  	  // state5: result.cancel,
			    }
			    const navs = ORDER_NAVS.slice(1).map((v, index) => {
			  	  v._num = obj['state' + (v.id + '')] || 0
			  	  return v
			    })
			    this.orderText = navs
		  })

	  },
	onLogin(){
		let token = getToken()
		if(getToken()){
			return
		}
		uni.navigateTo({
			url:'../../login/login'
		})
	},
    coverTouchStart(e) {
      //滑动开始 记录目标原始坐标
      this.setData({
        startY: e.touches[0].clientY,
        coverTransition: 'transform .2s linear'
      });
    },
	moveHandle(){ //阻止下拉默认事件

	},
    coverTouchMove(e) {
      //滑动中
      let moveY = e.touches[0].clientY; //记录移动的坐标
      let startY = this.startY;
      let moveDistance = moveY - startY; //计算当前坐标与原始坐标的差
      if (moveDistance < 0) {
        //如果小于0 不做操作
        this.setData({
          moving: false
        });
        return;
      }
      this.setData({
        moving: true
      });

      if (moveDistance >= 60) {
        //如果差在该区间内
        moveDistance = 60;
      }

      if (moveDistance > 0 && moveDistance <= 60) {
        this.setData({
          coverTransform: `translateY(${moveDistance}px)`
        });
      }
    },

    coverTouchEnd(e) {
      //滑动结束 回到原始位置
      if (this.moving == false) {
        return;
      }
      this.setData({
        coverTransform: 'translateY(0px)',
        moving: false,
        coverTransition: 'transform 0.3s cubic-bezier(.21,1.93,.53,.64)'
      });
    },
  }
};
</script>
<style scoped lang="scss">
.userHeader {
  height: 520upx;
  width: 100vw;
  position: relative;
  padding: 50upx 4%;
}

.userHeader .user_bg {
  height: 100%;
  width: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

.userHeader .nav {
  height: 180upx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.user {
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  overflow: hidden;
  z-index: 200;
  width: 100%;
}

.user image {
  width: 130upx;
  height: 130upx;
  border: 5upx solid #fff;
  border-radius: 50%;
}

.user .text {
  font-size: 24upx;
  color: #fff;
  margin-left: 20upx;
  width: 76%;
  line-height: 30upx;
  height: 30upx;
  white-space: break-spaces;
}

.vip {
  height: 240upx;
  position: relative;
  display: flex;
  padding: 20upx 24upx;
  border-radius: 16upx 16upx 0 0;
  width: 100%;
  overflow: hidden;
}

.banquan {
  position: absolute;
  color: #f6e5a3;
  top: 100upx;
  left: 24upx;
  font-size: 24upx;
}

.vip .vip_bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.vipname {
  z-index: 5;
  display: flex;
  width: 100%;
  height: 60upx;
  position: relative;
  align-items: center;
}

.vipname .zuanshi {
  color: #f6e5a3;
  font-size: 42upx;
  line-height: 60upx;
}

.vipname .names {
  color: #f6e5a3;
  line-height: 20upx;
  font-size: 24upx;
  margin-left: 20upx;
}

.vip_level {
  width: 115upx;
  height: 35upx;
  text-align: center;
  line-height: 35upx;
  font-size: 20upx;
  color: #333;
  background: linear-gradient(270deg, #f9e6af, #ffd465);
  border-radius: 20upx;
  position: absolute;
  top: 12upx;
  right: 10upx;
}

/* 中间菜单栏 */
.userMenu {
  margin-top: -178upx;
  padding: 0 4%;
  position: relative;
  background-color: #f8f8f8;
  padding-bottom: 10upx;
}

.userMenu .arc {
  width: 100%;
  height: 36upx;
  position: absolute;
  top: -34upx;
  left: 0;
}
.place{
	padding: 0 4%;
	position: relative;
	background-color: #f8f8f8;
	padding-bottom: 40upx;
}
</style>