hezhiying/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">
			  		<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 class="focus-area">
				<view class="list" @click="onCollect('goods')">
					<view class="num">
						<text>28</text>
					</view>
					<view class="title">
						<text>商品关注</text>
					</view>
				</view>
				<view class="list" @click="onCollect('content')">
					<view class="num">
						<text>28</text>
					</view>
					<view class="title">
						<text>喜欢的内容</text>
					</view>
				</view>
				<view class="list" @click="onCollect('record')">
					<view class="num">
						<text>28</text>
					</view>
					<view class="title">
						<text>浏览记录</text>
					</view>
				</view>
			</view> -->
			
		</view>
		
		<!-- 买方 -->
		<view class="wallet-info">
			<view class="fangmian">
				买方
			</view>
			<view class="infoContainer">
				<view class="list" @click="onWallet('integral')">
					<view class="icon">
						<image src="../../static/image/c1.png" mode="heightFix"></image>
					</view>
					<view class="title">
						<text>我的仓库</text>
					</view>
				</view>
				<view class="list" @click="onWallet('coupon')">
					<view class="icon">
						<image src="../../static/image/c2.png" mode="heightFix"></image>
					</view>
					<view class="title">
						<text>确认付款</text>
					</view>
				</view>
				<view class="list" @click="onWallet('wallet')">
					<view class="icon">
						<image src="../../static/image/c3.png" mode="heightFix"></image>
					</view>
					<view class="title">
						<text>确认收货</text>
					</view>
				</view>
				<view class="list">
					<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="onWallet('integral')">
					<view class="icon">
						<image src="../../static/image/c1.png" mode="heightFix"></image>
					</view>
					<view class="title">
						<text>我的仓库</text>
					</view>
				</view>
				<view class="list" @click="onWallet('coupon')">
					<view class="icon">
						<image src="../../static/image/c2.png" mode="heightFix"></image>
					</view>
					<view class="title">
						<text>确认付款</text>
					</view>
				</view>
				<view class="list" @click="onWallet('wallet')">
					<view class="icon">
						<image src="../../static/image/c3.png" mode="heightFix"></image>
					</view>
					<view class="title">
						<text>确认收货</text>
					</view>
				</view>
				<view class="list">
					<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'}" :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;
				}
			},
			/**
			 * 订单
			 */
			onSkipOrder(type){
				if(type === 5){
					uni.navigateTo({
						url: '/pages/AfterSalesOrder/AfterSalesOrder',
					})
					return;
				}
				uni.navigateTo({
					url: '/pages/MyOrderList/MyOrderList?type=' + type,
				})
			},
			/**
			 * 钱包跳转点击
			 */
			onWallet(type){
				switch (type){
					case 'integral':
						uni.navigateTo({
							url: '/pages/IntegralDetails/IntegralDetails',
						})
						break;
					case 'coupon':
						uni.navigateTo({
							url: '/pages/MyCoupon/MyCoupon',
						})
						break;
					case 'wallet':
						uni.navigateTo({
							url: '/pages/MyWallet/MyWallet',
						})
						break;
					case 'SignIn':
						uni.navigateTo({
							url: '/pages/SignIn/SignIn',
						})
						break;
					case 'payment':
						uni.navigateTo({
							url: '/pages/PaymentCode/PaymentCode',
						})
						break;
				}
			},
			/**
			 * 我的服务点击
			 */
			onServer(type){
				switch (type){
					case 'feedback':
						uni.navigateTo({
							url: '/pages/Feedback/Feedback'
						})
						break;
					case 'serve':
						this.isHotline = true;
						break;
				}
			},
			/**
			 * 设置点击
			 */
			onSetting(){
				uni.navigateTo({
					url: '/pages/Setting/Setting'
				})
			},
			
			/**
			 * 会员点击
			 */
			onMmeberVip(){
				uni.navigateTo({
					url: '/pages/MembersOpened/MembersOpened',
				})
			},
			  /**
			   * 跳转点击
			   * @param {String} type 跳转类型
			   */
			  onSkip(type){
				switch (type){
				  case 'goods':
					uni.navigateTo({
					  url: '/pages/GoodsDetails/GoodsDetails',
					  animationType: 'zoom-fade-out',
					  animationDuration: 200
					})
					break;
				}
			  },
			  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'
					  })
				  }
			  },
			 
		}
	}
</script>

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