Kirin_mp/pages/user/index.vue

<template>
	<view>
		<view class="user_box">
			<view class="box_left">
				<navigator url="/pages/user/settings" > 
					<image class="user_image"  :src="userInfo.userpic" ></image>
				</navigator>
			</view>
			<view class="box_center">
				<view class="user_name">{{userInfo.username}}</view>
				<view class="user_info">{{userInfo.phone}}</view>
			</view>
			<view class="box_right">
				<navigator url="/pages/user/info" class="company_text" v-if="!userInfo.city_id">请选择城市</navigator>
				<navigator url="/pages/user/settings" class="setting_page" v-if="userInfo.city_id" >
					<image class="setting_icon"  src="../../static/icon/setting.png" ></image>
				</navigator>
			</view>
		</view>
    <view class="navigator_content">
      <view class="navigator_list">
        <navigator class="navigator_item" url="/pages/orders/index" >
          <view class="navigator_image_order">
            <image class="navigator_image" src="../../static/user_icon/user_order_icon.png" mode=""></image>
          </view>
          <view class="navigator_title">我的订单</view>
        </navigator>
        <navigator class="navigator_item" url="/pages/course/usercourse" >
          <view class="navigator_image_class">
            <image class="navigator_image" src="../../static/user_icon/user_class_icon.png" mode=""></image>
          </view>
          <view class="navigator_title">课程表</view>
        </navigator>
        <navigator class="navigator_item" url="/pages/score/orders" >
          <view class="navigator_image_score">
            <image class="navigator_image" src="../../static/user_icon/user_score_icon.png" mode=""></image>
          </view>
          <view class="navigator_title">积分订单</view>
        </navigator>
        <navigator class="navigator_item" url="/pages/addr/index" >
          <view class="navigator_image_attr">
            <image class="navigator_image" src="../../static/user_icon/user_attr_icon.png" mode=""></image>
          </view>
          <view class="navigator_title">收货地址</view>
        </navigator>
        <navigator class="navigator_item" url="/pages/coupon/index" >
          <view class="navigator_image_coupon">
            <image class="navigator_image" src="../../static/user_icon/user_coupon_icon.png" mode=""></image>
          </view>
          <view class="navigator_title">优惠卷</view>
        </navigator>
        <navigator class="navigator_item" url="/pages/score/clockin" >
          <view class="navigator_image_order">
            <image class="navigator_image" src="../../static/user_icon/user_clockin_icon.png" mode=""></image>
          </view>
          <view class="navigator_title">签到</view>
        </navigator>
        <!-- 				<navigator class="navigator_item" url="/pagesA/user/favorites" >
                  <view class="navigator_image_favo">
                    <view class="star_icon">
                      <uni-icons type="star-filled" size="40" color= "#fff"></uni-icons>
                    </view>
                  </view>
                  <view class="navigator_title">我的收藏</view>
                </navigator> -->
      </view>
    </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo:{
					username:"请登录",
					userpic:"../../static/icon/doctor.png",
					phone:"kailin",
					status:0,
					city_id:0,
				},
			}
		},
		onLoad() {
			// #ifdef MP-WEIXIN
			//分享按钮
			uni.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			})
			// #endif
		},
		onShareAppMessage(obj) {
			// 获取分享信息
			let shareList 	= getApp().globalData.shareList;
			// 获取分享信息
			let shareObj	= {
								title: '药优惠 得积分 兑豪礼',
								path: '/pages/score/lottery',
								imageUrl:'',
							};
			// 循环列表
			for ( let i in shareList ) {
				if( shareList[i].pages == 'pages/user/index' ) {
					shareObj.path  = shareList[i].path ? shareList[i].path : shareObj.path ;
					shareObj.title  = shareList[i].title ? shareList[i].title : shareObj.title ;
					shareObj.imageUrl  = shareList[i].image_url ? shareList[i].image_url : shareObj.imageUrl ;
				}
			}
			// 返回分享信息
			return shareObj;
		},
		onShow() {
			// 登录提示
			if( !this.$checkAccess.alterLogin() ) return ;
			// 判断数据
			this.$http.request('api/custom/get_info').then((callback)=>{
				if( callback.code == 'success' ){
					if( !callback.data.userpic ) callback.data.userpic = "../../static/icon/doctor.png";
					// 赋值
					this.userInfo = callback.data;
					// 存储登录标识
					uni.setStorageSync('userInfo',callback.data);
				}
			});
		},
		methods: {
			
		}
	}
</script>

<style lang="less">
	.user_box{
		width: 680rpx;
		height: 180rpx;
		overflow: hidden;
		background: #FFFFFF;
		padding: 10rpx 35rpx;
		.box_left{
			float: left;
			display: block;
			width: 140rpx;
			height: 140rpx;
			.user_image{
				display: block;
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				margin: 10rpx auto;
			}
		}
		.box_center{
			float: left;
			width: 300rpx;
			height: 140rpx;
			margin-left: 35rpx;
			.user_name{
				font-size: 30rpx;
				line-height: 80rpx;
			}
			.user_info{
				color: #999999;
				font-size: 24rpx;
				line-height: 60rpx;
			}
		}
		.box_right{
			float: right;
			width: 140rpx;
			height: 140rpx;
			font-size: 20rpx;
			line-height: 140rpx;
			.setting_page{
				width: 140rpx;
				height: 140rpx;
				display: block;
				overflow: hidden;
				.setting_icon{
					width: 60rpx;
					height: 60rpx;
					display: block;
					margin: 40rpx auto;
				}
			}
			.company_text{
				color: #E03519;
				width: 140rpx;
				height: 140rpx;
				font-size: 20rpx;
				text-align: center;
				line-height: 140rpx;
			}
		}
	}
  .navigator_content{
    width: 750rpx;
    height: 75vh;
    background-color: #FFFFFF;
    .navigator_list{
      width: 690rpx;
      display: flex;
      flex-wrap: wrap;
      padding: 35rpx 0rpx;
      margin: 0rpx auto;
      .navigator_item{
        height: 180rpx;
        margin: 25rpx;
        text-align: center;
        .navigator_image_box{
          background-color: #ffac1e;
          border-radius: 40rpx;
          .navigator_image{
            width: 80rpx;
            height: 80rpx;
            margin: 20rpx auto;
            border-radius: 5rpx;
          }
        }
        .navigator_image_order{
          background-color: #ffac1e;
          border-radius: 40rpx;
          .navigator_image{
            width: 80rpx;
            height: 80rpx;
            margin: 20rpx auto;
            border-radius: 5rpx;
          }
        }
        .navigator_image_class{
          background-color: #29c78a;
          border-radius: 40rpx;
          .navigator_image{
            width: 80rpx;
            height: 80rpx;
            margin: 20rpx auto;
            border-radius: 5rpx;
          }
        }
        .navigator_image_score{
          background-color: #3a85ff;
          border-radius: 40rpx;
          .navigator_image{
            width: 80rpx;
            height: 80rpx;
            margin: 20rpx auto;
            border-radius: 5rpx;
          }
        }
        .navigator_image_attr{
          background-color: #b88fe9;
          border-radius: 40rpx;
          .navigator_image{
            width: 80rpx;
            height: 80rpx;
            margin: 20rpx auto;
            border-radius: 5rpx;
          }
        }
        .navigator_image_coupon{
          background-color: #b88fe9;
          border-radius: 40rpx;
          .navigator_image{
            width: 80rpx;
            height: 80rpx;
            margin: 20rpx auto;
            border-radius: 5rpx;
          }
        }
        .navigator_image_favo{
          background-color: #29c78a;
          border-radius: 40rpx;
          width: 120rpx;
          height: 125rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          .star_icon{
            // padding: 18rpx 0rpx;
          }

        }
        .navigator_title{
          width: 120rpx;
          margin-top: 20rpx;
          display: block;
          font-size: 30rpx;
          line-height: 40rpx;
          text-align: center;
        }
      }
    }

  }
	.alter_info{
		display: block;
		color: #E03519;
		font-size: 20rpx;
		overflow: hidden;
		margin: 20rpx auto;
		background: #FFFFFF;
		line-height: 40rpx;
		padding: 35rpx 35rpx;
	}
</style>