kailin_mp/pages/user/index.vue

<template>
  <view style="height: 100vh; overflow: hidden">
    <view class="page-header">
      <view class="page-header-title" :style="status_bar_style">我的</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" v-if="is_login">{{ userInfo?.username }}</view>
          <navigator class="user_name" url="/pages/login/index" v-if="!is_login">请登录</navigator>
          <view class="user_info">{{ userInfo?.phone }}</view>
        </view>
      </view>
    </view>
    <view class="customized-page">
      <view class="icon-list">
        <icon-list mode="row8" :icons="icons_1" :gap="0" :small="true" />
      </view>
      <view class="icon-list">
        <icon-list mode="row8" :icons="icons_2" :gap="0" :small="true" />
      </view>
      <view class="icon-list">
        <icon-list mode="row8" :icons="icons_3" :gap="0" :small="true" />
      </view>
      <view class="user_list">
        <list v-bind="list_props" />
      </view>
      <view class="alter_info">本程序暂不提供在线交易以及支付功能，您所提交的预约，我们将验证您的购药资质并交由有售卖药品资质的商业公司与您联系确认并提供线下后续服务。</view>
    </view>

    <!-- <view class="balance_content">
      <view class="balance_content_main">
        <view style="display: flex">
          <view class="price_content" style="margin-right: 45rpx">
            <text class="title">当前余额（元）</text> <text>{{ Number(userInfo.amount || 0).toFixed(2) }}</text></view
          >
          <view class="price_content">
            <text class="title">已成功提现（元）</text> <text>{{ Number(userInfo.transfer_amount || 0).toFixed(2) }}</text></view
          >
        </view>
        <view class="withdraw_btn" @click="_goWithdraw">提现</view>
      </view>
      <view class="balance_content_detail" @click="_goBalance">
        <view>查看余额明细</view>
        <view>></view>
      </view>
    </view>
    <view class="navigator_list">
      <navigator class="navigator_item" url="/pages/orders/index">
        <image class="navigator_image" src="https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/user/orders.png" mode=""></image>
        <view class="navigator_title">预约</view>
      </navigator>
      <navigator class="navigator_item" url="/pages/coupon/index">
        <image class="navigator_image" src="https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/user/coupon.png" mode=""></image>
        <view class="navigator_title">优惠券</view>
      </navigator>
      <navigator class="navigator_item" url="/pages/score/orders">
        <image class="navigator_image" src="https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/user/score.png" mode=""></image>
        <view class="navigator_title">积分订单</view>
      </navigator>
      <navigator class="navigator_item" url="/pages/recruitment/index">
        <image class="navigator_image" src="https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/user/newuser.png" mode=""></image>
        <view class="navigator_title">拉新活动</view>
      </navigator>
    </view>
    <view class="navigator_list">
      <navigator class="navigator_item" url="/pages/article/index">
        <image class="navigator_image" src="https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/user/article.png" mode=""></image>
        <view class="navigator_title">资讯</view>
      </navigator>
      <navigator class="navigator_item" url="/pages/video/index" v-if="userInfo.is_video_vip == 1">
        <image class="navigator_image" src="https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/user/video.png" mode=""></image>
        <view class="navigator_title">学习</view>
      </navigator>
    </view> -->
    <view class="packet_content" v-if="show_packet">
      <view class="close_btn" @click="closePacket"> X </view>
      <image src="https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/icon/red_packet.gif" class="red_packet" @click="_getredpacket" />
    </view>
    <cc-myTabbar :tabBarShow="4"></cc-myTabbar>
  </view>
</template>

<script>
import IconList from '@/components/IconList';
import List from '@/components/List';
const line1_icons = [
  {
    image: 'https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/user/order.png',
    text: '全部订单',
    urlMap: { internal_url: '/pages/orders/index?status=0' },
  },
  {
    image: 'https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/user/order_1.png',
    text: '待付款',
    urlMap: { internal_url: '/pages/orders/index?status=1' },
  },
  {
    image: 'https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/user/order_2.png',
    text: '已取消',
    urlMap: { internal_url: '/pages/orders/index?status=4' },
  },
  {
    image: 'https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/user/order_3.png',
    text: '已完成',
    urlMap: { internal_url: '/pages/orders/index?status=8' },
  },
];

const line2_icons = [
  {
    image: 'https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/user/line_2_1.png',
    text: '余额',
    urlMap: { internal_url: '/pages/balance/index' },
  },
  {
    image: 'https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/user/line_2_2.png',
    text: '积分订单',
    urlMap: { internal_url: '/pages/score/orders' },
  },
  {
    image: 'https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/user/line_2_3.png',
    text: '我的优惠券',
    urlMap: { internal_url: '/pages/coupon/index' },
  },
];

const line3_icons = [
  {
    image: 'https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/user/line_3_1.png',
    text: '签到',
    urlMap: { internal_url: '/pages/score/clockin' },
  },
  {
    image: 'https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/user/line_3_2.png',
    text: '积分商城',
    urlMap: { internal_url: '/pages/score/index' },
  },
];
export default {
  components: { IconList, List },
  data() {
    return {
      userInfo: {
        username: '请登录',
        userpic: 'https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/icon/doctor.png',
        phone: 'kailin',
        status: 0,
        city_id: 0,
        is_video_vip: 0,
        amount: 0.0,
        transfer_amount: 0.0,
      },
      is_login: 0,
      packetList: [],
      show_packet: false,
      icons_1: line1_icons,
      icons_2: line2_icons,
      icons_3: line3_icons,
      list_props: {
        iconShow: false,
        lists: [
          { text: '地址', url: '/pages/addr/index' },
          { text: '设置', url: '/pages/user/settings' },
        ],
        showTitle: false,
        title: '列表设置',
      },
      status_bar_style: {},
    };
  },
  onLoad(param) {
    // 存储分享标识
    if (param.share_uid) {
      uni.setStorageSync('share_uid', param.share_uid);
      console.log('share_uid', param.share_uid);
    }
    // #ifdef MP-WEIXIN
    uni.hideTabBar();

    // #ifdef MP-WEIXIN

    const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
    // #endif

    this.status_bar_style = {
      // #ifdef MP-WEIXIN
      height: menuButtonInfo.height + 'px',
      top: menuButtonInfo.top + 'px',
      'line-height': menuButtonInfo.height + 'px',
      // #endif
      // #ifdef H5
      height: '44px',
      'line-height': '44px',
      // #endif
    };

    //分享按钮
    uni.showShareMenu({
      withShareTicket: true,
      menus: ['shareAppMessage', 'shareTimeline'],
    });
    // #endif
  },
  onShareAppMessage(obj) {
    //获取当前用户信息
    let userInfo = uni.getStorageSync('userInfo');
    let param = '';
    if (userInfo.uid) {
      param = '?share_uid=' + userInfo.uid;
    }
    // 获取分享信息
    let shareList = getApp().globalData.shareList;
    // 获取分享信息
    let shareObj = {
      title: '999智控终端平台\n药优惠 得积分 兑豪礼',
      //path: '/pages/score/lottery',
      path: '/pages/user/index',
      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 ? `999智控终端平台\n${shareList[i].title}` : shareObj.title;
        shareObj.imageUrl = shareList[i].image_url ? shareList[i].image_url : shareObj.imageUrl;
      }
    }
    if (param) {
      shareObj.path += param;
    }
    // 返回分享信息
    return shareObj;
  },
  onShow() {
    this.is_login = this.$checkAccess.checkLogin();
    // 未登录不请求
    if (!this.is_login) {
      this.userInfo = {
        username: '请登录',
        userpic: 'https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/icon/doctor.png',
        phone: 'kailin',
        status: 0,
        city_id: 0,
        is_video_vip: 0,
        amount: 0.0,
        transfer_amount: 0.0,
      };
      return;
    }
    // 判断数据
    this.$http.request('api/custom/get_info').then((callback) => {
      if (callback.code == 'success') {
        if (!callback.data.userpic) callback.data.userpic = 'https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/icon/doctor.png';
        // 赋值
        this.userInfo = callback.data;
        // 存储登录标识
        uni.setStorageSync('userInfo', callback.data);
      }
    });
    this._getPacketNum();
  },
  methods: {
    _getredpacket() {
      let url = '/pages/redpacket/list';
      if (this.packetList.length == 1) {
        url = `/pages/redpacket/index?packet_id=${this.packetList[0].custom_redpacket_id}`;
      }
      uni.navigateTo({
        url: url,
      });
    },
    _goWithdraw() {
      uni.navigateTo({
        url: '/pages/user/withdraw',
      });
    },
    _goBalance() {
      uni.navigateTo({
        url: '/pages/balance/index',
      });
    },
    //获取红包数量是否展示红包领取页面
    _getPacketNum() {
      this.$http.request('api/redpacket/get_list').then((callback) => {
        if (callback.code == 'success') {
          this.packetList = callback.data.data || [];
          if (callback.data.data.length > 0) {
            this.show_packet = true;
          }
        }
      });
    },
    closePacket() {
      this.show_packet = false;
    },
  },
};
</script>

<style lang="less" scoped>
.icon-list {
  padding: 0 32rpx;
  box-sizing: border-box;
  margin: 24rpx 0 0;
}
.user_list {
  margin-top: 24rpx;
  padding: 0 32rpx;
}
.page-header {
  width: 100%;
  height: 494rpx;
  background: url(https://kailin-saas.oss-cn-shenzhen.aliyuncs.com/images/index/user-mask.png) no-repeat center;
  background-size: contain;
  position: fixed;
  z-index: 100;
  .page-header-title {
    position: absolute;
    width: 100%;
    color: #ffffff;
    text-align: center;
  }
}
.shop-info-header-right {
  width: 184rpx;
  height: 56rpx;
  background: #ffffff;
  border-radius: 200rpx 200rpx 200rpx 200rpx;
  color: #999;
  font-size: 28rpx;
  text-align: center;
  line-height: 56rpx;
  position: absolute;
  right: 50rpx;
  top: 20rpx;
}
.customized-page {
  display: flex;
  flex-direction: column;
  padding-bottom: calc(env(safe-area-inset-bottom) + 120rpx);
  position: absolute;
  top: 350rpx;
  z-index: 100;
  .customized-item {
    margin: 10rpx 0;
    padding: 0 16rpx;
    box-sizing: border-box;
  }
  .alter_info {
    display: block;
    color: var(--primary-color);
    font-size: 20rpx;
    overflow: hidden;
    line-height: 40rpx;
    padding: 32rpx 32rpx;
    color: #f89c33;
  }
}
.user_box {
  width: 680rpx;
  height: 180rpx;
  overflow: hidden;
  padding: 10rpx 35rpx;
  color: #ffffff;
  position: absolute;
  bottom: 100rpx;
  .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 {
      font-size: 24rpx;
      line-height: 60rpx;
    }
  }
}
.navigator_list {
  display: flex; // 弹性盒模型
  overflow: hidden;
  margin: 20rpx auto;
  background: #ffffff;
  padding: 35rpx 0rpx;
  .navigator_item {
    float: left;
    height: 160rpx;
    display: block;
    margin: 0rpx auto;
    text-align: center;
    .navigator_image {
      width: 80rpx;
      height: 80rpx;
      margin: 20rpx auto;
      border-radius: 5rpx;
    }
    .navigator_title {
      width: 120rpx;
      display: block;
      font-size: 30rpx;
      line-height: 40rpx;
      text-align: center;
    }
  }
}
.navigator_list_community {
  display: block; // 弹性盒模型
  overflow: hidden;
  margin: 20rpx auto;
  background: #ffffff;
  padding: 35rpx 35rpx;
  .navigator_item {
    float: left;
    height: 160rpx;
    display: block;
    margin: 0rpx auto;
    text-align: center;
    .navigator_image {
      width: 80rpx;
      height: 80rpx;
      margin: 20rpx auto;
      border-radius: 5rpx;
    }
    .navigator_title {
      width: 120rpx;
      display: block;
      font-size: 30rpx;
      line-height: 40rpx;
      text-align: center;
    }
  }
}

.balance_content {
  margin: 20rpx;
  padding: 35rpx;
  background-color: #fff;
  box-sizing: border-box;
  .balance_content_main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 36rpx;
    .price_content {
      display: flex;
      flex-direction: column;
      > .title {
        font-size: 24rpx;
        margin-bottom: 15rpx;
      }
    }
    .withdraw_btn {
      color: #ffffff;
      background-color: #169bd5;
      border-radius: 60rpx;
      padding: 10rpx 20rpx;
      width: 90rpx;
      text-align: center;
      line-height: 40rpx;
    }
  }
  .balance_content_detail {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 2rpx solid #f3f3f3;
    font-size: 24rpx;
    padding-top: 18rpx;
  }
}
.packet_content {
  position: absolute;
  right: 0;
  bottom: 15%;
  width: 160rpx;
  height: 160rpx;
  z-index: 101;
  .red_packet {
    width: 100%;
    height: 100%;
  }
  .close_btn {
    width: 40rpx;
    height: 40rpx;
    font-size: 24rpx;
    line-height: 40rpx;
    border-radius: 50%;
    border: 1rpx solid #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 5rpx;
    left: 0;
  }
}
</style>