exam_mp/pages/user/index.vue

<template>
  <Container
    title="我的"
    :scrollStyle="{
      padding: 0,
    }"
    :showBack="false"
    bgColor="#f8f8f8"
  >
    <template #bg>
      <image
        src="https://openwork-oss.oss-cn-shenzhen.aliyuncs.com/uploads/question/2025/05/bHbLzGDSB07Gc0tqCVCI3NLUx4sbUU4KHKSolvBq.png"
        mode="scaleToFill"
        class="bg"
      />
    </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" v-if="is_login">{{ userInfo.username }}</view>
          <navigator class="user_name" url="/pages/login/index" v-if="!is_login"
            >请登录</navigator
          >
          <view class="user_info_vip" v-if="userInfo.vip_info != null">
            <image
              class="user_info_vip_icon"
              src="https://openwork-oss.oss-cn-shenzhen.aliyuncs.com/uploads/question/2025/05/g9ot7hsUGLWA87qyEe1wWRf7agCv911K2bqOHRiX.png"
            ></image>
            <view
              class="user_info_vip_type"
              v-if="
                userInfo.vip_info != null && userInfo.vip_info.vip_type == 1
              "
              >月卡VIP</view
            >
            <view
              class="user_info_vip_type"
              v-if="
                userInfo.vip_info != null && userInfo.vip_info.vip_type == 2
              "
              >年卡VIP</view
            >
            <view
              class="user_info_vip_type"
              v-if="
                userInfo.vip_info != null && userInfo.vip_info.vip_type == 3
              "
              >季卡VIP</view
            >
          </view>
          <view class="user_info" v-if="userInfo.vip_info != null"
            >有效期至：{{ userInfo.vip_info.vip_end_time }}</view
          >
        </view>
        <view class="box_right">
          <navigator
            url="/pages/user/settings"
            class="setting_page"
            v-if="is_login"
          >
            <uni-icons type="gear" size="30"></uni-icons>
          </navigator>
        </view>
      </view>
      <view class="page_content">
        <view class="navigator_list">
          <view
            class="navigator_list_vip"
            v-if="
              vip_info == null || (vip_info != null && vip_info.status == '2')
            "
          >
            <navigator
              class="navigator_item_banner"
              url="/pages/recharge/index"
            >
              <view class="navigator_title_vip_banner">
                <image
                  class="vip-banner-image"
                  src="https://openwork-oss.oss-cn-shenzhen.aliyuncs.com/uploads/question/2025/05/vWGL312rGs2zmtaUqQOmzG8YVgdLSmxV8NaUvcQR.png"
                  mode="aspectFill"
                ></image>
              </view>
            </navigator>
          </view>
          <view class="navigator_list_other">
            <navigator class="navigator_item_one" url="/pages/order/index">
              <view class="navigator_title">订单记录</view>
              <view class="navigator_title_ico"
                ><uni-icons type="right" size="20"></uni-icons
              ></view>
            </navigator>
            <navigator class="navigator_item_two" url="/pages/user/share">
              <view class="navigator_title">分享有礼</view>
              <view class="navigator_title_ico"
                ><uni-icons type="right" size="20"></uni-icons
              ></view>
            </navigator>
            <navigator class="navigator_item_three" url="/pages/user/invited">
              <view class="navigator_title_three">邀请有礼</view>
              <view class="navigator_title_ico"
                ><uni-icons type="right" size="20"></uni-icons
              ></view>
            </navigator>
          </view>
        </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>
      </view>
    </view>
    <view class="service">
      <CustomerService>联系客服</CustomerService>
    </view>
  </Container>
</template>

<script>
import Container from "../../components/Container/Container.vue";
import CustomerService from "@/components/CustomerService/CustomerService.vue";

export default {
  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_login: 0,
      packetList: [],
      show_packet: false,
      windowHeight: 0,
      vip_info: null,
    };
  },
  onLoad(param) {
    // 存储分享标识
    if (param.share_uid) {
      uni.setStorageSync("share_uid", param.share_uid);
      console.log("share_uid", param.share_uid);
    }
    // #ifdef MP-WEIXIN
    //分享按钮
    uni.showShareMenu({
      withShareTicket: true,
      menus: ["shareAppMessage", "shareTimeline"],
    });
    // #endif
  },
  mounted() {
    this.updateWindowHeight();
    // 监听窗口变化（H5、小程序生效，App需用 onWindowResize）
    uni.onWindowResize((res) => {
      this.windowHeight = res.size.windowHeight;
    });
    console.log(this.windowHeight);
  },
  onShareAppMessage(obj) {
    // 店铺ID
    let shopId = uni.getStorageSync("shopId");
    //获取当前用户信息
    let userInfo = uni.getStorageSync("userInfo");
    let param = "?shop_id" + shopId;
    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/question_bank/question_reception/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;
          // 存储登录标识
          this.vip_info = callback.data.vip_info;
          uni.setStorageSync("userInfo", callback.data);
        }
      });
  },
  methods: {
    updateWindowHeight() {
      const systemInfo = uni.getSystemInfoSync();
      this.windowHeight = systemInfo.windowHeight;
      console.log(this.windowHeight);
    },
    _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",
      });
    },
    closePacket() {
      this.show_packet = false;
    },
    onChange(e) {
      console.log(e);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/uni.scss"; // 引入全局scss变量
.page_content {
  background: #f8f8f8;
}

.bg {
  width: 750rpx;
  height: 456rpx;
}
.user_box {
  width: 680rpx;
  height: 180rpx;
  overflow: hidden;
  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;
      padding-bottom: 20rpx;
    }
    .user_info {
      color: #999999;
      font-size: 24rpx;
      line-height: 60rpx;
      margin-left: 50rpx;
    }
    .user_info_vip {
      color: #999999;
      font-size: 24rpx;
      line-height: 40rpx;
      display: flex;
    }
    .user_info_vip_icon {
      width: 35rpx;
      height: 35rpx;
      margin-top: 5rpx;
      padding-right: 15rpx;
    }
    .user_info_vip_type {
      color: #3f75ff;
    }
  }
  .box_right {
    float: right;
    width: 70rpx;
    height: 80rpx;
    font-size: 20rpx;
    line-height: 80rpx;
    .setting_page {
      width: 80rpx;
      height: 80rpx;
      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_list_vip {
  height: 108rpx;
  border-radius: 30rpx;
  background: #ffffff;
  margin-bottom: 50rpx;
}
.navigator_list_other {
  background: #ffffff;
  margin-bottom: 50rpx;
  height: 296rpx;
  border-radius: 30rpx;
}
.navigator_title_vip_banner {
  width: 100%;
  display: block;
  height: 108rpx;
  font-size: 30rpx;
  .vip-banner-image {
    width: 100%;
    height: 108rpx;
    display: block;
  }
}
.navigator_list {
  border-top: 1rpx solid #eeeeee;
  height: 505rpx;
  margin: 30rpx;
  border-radius: 30rpx;
  .navigator_item_one {
    position: relative;
    border-radius: 30rpx 30rpx 0rpx 0rpx;
  }
  .navigator_item_two {
    position: relative;
  }
  .navigator_item_three {
    position: relative;
    border-radius: 0rpx 0rpx 30rpx 30rpx;
  }
  .navigator_title_ico {
    position: absolute;
    right: 30rpx;
    top: 25rpx;
  }
  .navigator_title {
    display: block;
    font-size: 30rpx;
    line-height: 40rpx;
    border-bottom: 1rpx solid #eeeeee;
    padding: 30rpx 30rpx;
  }
  .navigator_title_three {
    display: block;
    font-size: 30rpx;
    line-height: 40rpx;
    padding: 30rpx 30rpx;
  }
}

.alter_info {
  display: block;
  color: #e03519;
  font-size: 20rpx;
  overflow: hidden;
  margin: 20rpx auto;
  background: #ffffff;
  line-height: 40rpx;
  padding: 35rpx 35rpx;
}
.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;
  .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;
  }
}

.service {
  position: absolute;
  bottom: 20%;
  right: 5%;
  color: $uni-primary;
  font-size: 28rpx;
  margin-bottom: 40rpx;
  text-align: right;
}
</style>