huazhiyu/pages/my/my.vue

<template>
	<view class="page">
		<view class="my-top">
			<!-- head -->
			<view class="head" :style="'background-color: rgba(255,255,255,'+(scrollTop/50)+');'">
			
				<view class="title" style="margin-left:20px;">
					<text v-show="scrollTop>20">我的</text>
				</view>
				<view class="setting-mess">
					<view class="setting" @click="onSetting">
						<text class="iconfont icon-setting" :style="scrollTop>20?'color:#333333':'color:#236030'"></text>
					</view>
					
				</view>
			</view>
			<!-- 用户信息 -->
			<view class="user-info" v-if="userInfo.id" @click="goUserCenter">
				<view class="portrait">
					<image :src="userInfo.avatar"></image>
				</view>
				<view class="info">
					<view class="nickname">
						<text>{{userInfo.nickname}}</text>
					</view>
					<view class="nickname">
						<!-- <image src="/static/rank.png"></image>
						<text>{{userInfo.score}}</text> -->
						<text>{{userInfo.mobile.replace(/^(\d{3})\d{4}(\d{4})/,'$1****$2')}}</text>
					</view>
				</view>
				<u-icon name="arrow-right" color="#236030" class="right"></u-icon>
				
			</view>
		  <view class="user-info" v-else @click="onUserInfo">
			<view class="portrait">
			  <image src="/static/image/logo254.png"></image>
			</view>
			<view class="info">
			  <view class="nickname">
				<text>登录/注册</text>
			  </view>
			</view>
		  </view>
		  <!-- 订单信息 -->
		  <view class="order-info">
			  <view class="shopTop">
			  	<view class="star" @click="goCollection">
			  		<u-icon name="star" color="#ffffff"></u-icon>
			  		<text>商品收藏</text>
			  	</view>
			  	<view class="star">
			  		<text>商品评价</text>
			  	</view>
			  </view>
			  <div class="shopItem">
				  <view class="list" @click="onSkipOrder(1)">
				  	<view class="icon">
				  		<image src="../../static/image/1.png" mode="heightFix"></image>
				  		<!-- <text class="num">22</text> -->
				  	</view>
				  	<view class="title">
				  		<text>待付款</text>
				  	</view>
				  </view>
				  <view class="list" @click="onSkipOrder(2)">
				  	<view class="icon">
				  		<image src="../../static/image/2.png" mode="heightFix"></image>
				  		<!-- <text class="num">22</text> -->
				  	</view>
				  	<view class="title">
				  		<text>待发货</text>
				  	</view>
				  </view>
				  <view class="list" @click="onSkipOrder(3)">
				  	<view class="icon">
				  		<image src="../../static/image/3.png" mode="heightFix"></image>
				  		<!-- <text class="num">22</text> -->
				  		<!-- <text class="num">22</text> -->
				  	</view>
				  	<view class="title">
				  		<text>待收货</text>
				  	</view>
				  </view>
				  <view class="list" @click="onSkipOrder(4)">
				  	<view class="icon">
				  		<image src="../../static/image/4.png" mode="heightFix"></image>
				  		<!-- <text class="num">22</text> -->
				  		<!-- <text class="num">22</text> -->
				  	</view>
				  	<view class="title">
				  		<text>待评价</text>
				  	</view>
				  </view>
				  <view class="list" @click="onSkipOrder(5)">
				  	<view class="icon">
				  		<image src="../../static/image/5.png" mode="heightFix"></image>
				  		<!-- <text class="num">22</text> -->
				  		<!-- <text class="num">22</text> -->
				  	</view>
				  	<view class="title">
				  		<text>我的订单</text>
				  	</view>
				  </view>
			  </div>
		  </view>

		</view>
		
		<!-- 买方 -->
		<view class="wallet-info">
			<view class="fangmian">
				买方
			</view>
			<view class="infoContainer">
				<view class="list" @click="goBuyWareHouse(-1)">
					<view class="icon">
						<image src="../../static/image/c1.png" mode="heightFix"></image>
					</view>
					<view class="title">
						<text>我的仓库</text>
					</view>
				</view>
				<view class="list" @click="goBuyWareHouse(0)">
					<view class="icon">
						<image src="../../static/image/c2.png" mode="heightFix"></image>
					</view>
					<view class="title">
						<text>确认付款</text>
					</view>
				</view>
				<view class="list" @click="goBuyWareHouse(1)">
					<view class="icon">
						<image src="../../static/image/c3.png" mode="heightFix"></image>
					</view>
					<view class="title">
						<text>确认收货</text>
					</view>
				</view>
				<view class="list" @click="goBuyWareHouse(3)">
					<view class="icon">
						<image src="../../static/image/c4.png" mode="heightFix"></image>
					</view>
					<view class="title">
						<text class="action">已完成</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 卖方 -->
		<view class="wallet-info">
			<view class="fangmian">
				卖方
			</view>
			<view class="infoContainer">
				<view class="list" @click="goSellWareHouse(-1)">
					<view class="icon">
						<image src="../../static/image/c1.png" mode="heightFix"></image>
					</view>
					<view class="title">
						<text>我的仓库</text>
					</view>
				</view>
				<view class="list" @click="goSellWareHouse(0)">
					<view class="icon">
						<image src="../../static/image/c2.png" mode="heightFix"></image>
					</view>
					<view class="title">
						<text>确认付款</text>
					</view>
				</view>
				<view class="list" @click="goSellWareHouse(1)">
					<view class="icon">
						<image src="../../static/image/c3.png" mode="heightFix"></image>
					</view>
					<view class="title">
						<text>确认收货</text>
					</view>
				</view>
				<view class="list" @click="goSellWareHouse(3)">
					<view class="icon">
						<image src="../../static/image/c4.png" mode="heightFix"></image>
					</view>
					<view class="title">
						<text class="action">已完成</text>
					</view>
				</view>
			</view>
		</view>
		<view class="card">
			<u-cell-group :border="false">
				<u-cell icon="map" :iconStyle="{'color':'#236030'}" @click="onAddress" :titleStyle="{'color':'#236030'}" title="我的地址" :isLink="true" :rightIconStyle="{'color':'#236030'}"></u-cell>
				<u-cell icon="coupon" :iconStyle="{'color':'#236030'}" @click="jump(1)" :titleStyle="{'color':'#236030'}" title="我的优惠券" :isLink="true" :rightIconStyle="{'color':'#236030'}"></u-cell>
				<u-cell icon="scan" :iconStyle="{'color':'#236030'}" @click="jump(4)" :titleStyle="{'color':'#236030'}" title="我的邀请二维码" :isLink="true" :rightIconStyle="{'color':'#236030'}"></u-cell>
			</u-cell-group>
		</view>
		<view class="card">
			<u-cell-group :border="false">
				<u-cell icon="share-square" @click="jump(2)" :iconStyle="{'color':'#236030'}" :titleStyle="{'color':'#236030'}" title="分销中心" :isLink="true" :rightIconStyle="{'color':'#236030'}"></u-cell>
				<u-cell icon="rmb" @click="goPay" :iconStyle="{'color':'#236030'}" :titleStyle="{'color':'#236030'}" title="收款管理" :isLink="true" :rightIconStyle="{'color':'#236030'}"></u-cell>
				<u-cell icon="rmb-circle" @click="jump(3)"  :iconStyle="{'color':'#236030'}" :titleStyle="{'color':'#236030'}" title="我的收益" :isLink="true" :rightIconStyle="{'color':'#236030'}"></u-cell>
			</u-cell-group>
		</view>
		
		<!-- tabbar -->
		<TabBar :tabBarShow="3"></TabBar>
	</view>
</template>

<script>
	import {getUserInfo} from '@/common/api.js'
	import TabBar from '../../components/TabBar/TabBar.vue';
	export default {
		components:{
			TabBar,
		},
		data() {
			return {
				scrollTop: 0,
				isHotline: false,
				userInfo:{
					avatar:"",
					createtime:null,
					expires_in:null,
					expiretime:null,
					id:null,
					mobile:null,
					nickname:null,
					score:null,
					token:null,
					user_id:null,
					username:null,
				}
      
			};
		},
		onReady() {
			uni.hideTabBar();
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onShow(){
			this.getUserInfoHandle()
		},
		methods:{
			goUserCenter(){
				uni.navigateTo({
					url:'/pages/Information/Information?name='+this.userInfo.nickname+'&avatar='+this.userInfo.avatar
				})
			},
			goPay(){
				uni.navigateTo({
					url:'/pages/shoukuan/shoukuan'
				})
			},
			//获取用户信息
			getUserInfoHandle(){
				getUserInfo().then(res=>{
					this.userInfo =Object.assign(({},this.userInfo,res.data))
				})
			},
			/**
			 * 用户信息点击
			 * @param {Number} type
			 */
			onUserInfo(){
				uni.navigateTo({
				  url: '/pages/login/login'
				})
			},
			/**
			 * 地址点击
			 */
			onAddress(){
				uni.navigateTo({
					url: '/pages/AddressList/AddressList',
				})
			},
			/**
			 * 关注跳转
			 */
			onCollect(type){
				switch (type){
					case 'goods':
						uni.navigateTo({
							url: '/pages/GoodsOn/GoodsOn'
						})
						break;
					case 'content':
						uni.navigateTo({
							url: '/pages/ContentCollection/ContentCollection'
						})
						break;
					case 'record':
						uni.navigateTo({
							url: '/pages/BrowsingHistory/BrowsingHistory'
						})
						break;
				}
			},
			goCollection(){
				uni.navigateTo({
					url:'/pages/GoodsOn/GoodsOn'
				})
			},
			/**
			 * 订单
			 */
			onSkipOrder(type){
				uni.navigateTo({
					url: '/pages/MyOrderList/MyOrderList?type=' + type,
				})
			},
			
			/**
			 * 设置点击
			 */
			onSetting(){
				uni.navigateTo({
					url: '/pages/Setting/Setting'
				})
			},
			
			
			  jump(val){
				  if(val==1){
					  uni.navigateTo({
					  	url:'/pages/MyCoupon/MyCoupon'
					  })
				  }else if(val==2){
					  uni.navigateTo({
					  	url:'/pages/fenxiao/fenxiao'
					  })
				  }else if(val==3){
					  uni.navigateTo({
					  	url:'/pages/shouyi/shouyi'
					  })
				  }else if(val==4){
					  uni.navigateTo({
					  	url:'/pages/my/invite'
					  })
					  
				  }
			  },
			  goBuyWareHouse(val){
				  uni.navigateTo({
				  	url:"/pages/warehouse/buy?type="+val
				  })
			  },
			  goSellWareHouse(val){
				  uni.navigateTo({
					url:"/pages/warehouse/sell?type="+val
				  })
			  },
			 
		}
	}
</script>

<style scoped lang="scss">
	@import 'my.scss';
	
	::v-deep .u-cell__body{
		padding:30rpx !important
	}
</style>