baokan_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>