index.vue

<template>
  <div class="ultraman_wrap_bg">
    <div class="ultraman_head_bg">
      <img src="@/static/user/logo.png" alt="">
    </div>

    <div class="ultraman_user_blk">
      <img class="ultraman_user_img" src="@/static/user/tpuciang.png" alt="">
      <div class="ultraman_user_info">
        <div class="ultraman_user_name">
          {{ userInfo?.data == "true" ? userInfo?.nickName : "未实名" }}
          <span v-if="userInfo?.data == 'true'">(已实名)</span>
          <span v-else>(未实名)</span>
        </div>
        <div class="ultraman_user_code">账号：{{ formatPhone(userInfo?.phonenumber) }}</div>
        <div class="ultraman_user_code" @click="handleCopy(userInfo?.yqm)">
          习币推广码：{{ userInfo?.yqm || "000000" }}
        </div>
      </div>
    </div>

    <div class="ultraman_card_title">
      <div class="ultraman_bank_detail">钱包详情</div>
      <div class="ultraman_card_tag">
        <span>查看更多</span>
        <img src="@/static/user/jiantou.png" alt="">
      </div>
    </div>

    <div class="ultraman_card_blk">
      <div class="ultraman_card_item">
        <div class="ultraman_card_name">我的习币</div>
        <div class="ultraman_card_bot">
          <div class="ultraman_card_num">{{ userInfo?.q5 || "0.00" }} 个</div>
          <div class="ultraman_card_detail" @click="gomx(5)">
            查看明细
            <img src="@/static/user/chkan.png" alt="">
          </div>
        </div>
      </div>
      <div class="ultraman_card_hr"></div>
      <div class="ultraman_card_item">
        <div class="ultraman_card_name yps1">
          <span>折算人民币</span>
          <span style="color: red;">已抛售：{{ userInfo?.psjr || 0.00 }} 元</span>
        </div>
        <div class="ultraman_card_bot">
          <div class="ultraman_card_num">{{ userInfo?.q5 * price || "0.00" }} 元</div>
          <div class="ultraman_card_btns">
            <div class="ultraman_card_btn ultraman_mglt" @click="handleClick('/user/paoshou')">
              我要抛售
            </div>
            <div class="ultraman_card_btn" @click="handleClick('/user/paoshoudetail')">
              抛售详情
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="ultraman_banner" @click="handleClick('/user/invite')">
      <img src="@/static/user/hengfu.png" alt="">
    </div>

    <div class="ultraman_data_list">
      <div class="ultraman_data_name">我的服务</div>
      <div class="ultraman_list_box">
        <div v-for="(item, index) in services" :key="index" class="ultraman_list_item" @click="handleClick(item.url)">
          <img :src="item.icon" alt="">
          <span>{{ item.name }}</span>
        </div>
      </div>
    </div>

    <div class="ultraman_data_hr"></div>

    <div class="ultraman_data_list2">
      <div class="ultraman_data_name">我的功能</div>
      <div class="ultraman_list_box">
        <div v-for="(item, index) in functions" :key="index" class="ultraman_list_item"
          @click="handleClick(item.url, index === 1 ? 'kf' : '')">
          <img :src="item.icon" alt="">
          <span>{{ item.name }}</span>
        </div>
      </div>
    </div>

    <div class="ultraman_btn" @click="handleLogout">安全退出</div>
    <div class="ultraman_foot">
      <img src="@/static/xbgz/gongan.png" alt="">
    </div>
    <LandscapePopup ref="popup" :type="popupType" />
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { usePageHook } from '@/hooks/usePageHook';
import paoshouxiangqing from '@/static/user/paoshouxiangqing.png'
import gouzhi from '@/static/user/gouzhi.png'
import bangding from '@/static/user/bangding.png'
import shiming from '@/static/user/shiming.png'
import guanfnag from '@/static/user/guanfnag.png'
import wodetuandui from '@/static/user/wodetuandui.png'
import anquan from '@/static/user/anquan.png'
import kefu from '@/static/user/kefu.png'
import request from '@/utils/request'


const popup = ref(null)
const popupType = ref('app')

// Reactive state
const userInfo = ref({})
const kfurl = ref(sessionStorage.getItem('kfurl') || '')
const services = ref([
  {
    name: '邀请好友',
    icon: paoshouxiangqing,
    url: '/user/invite'
  },
  {
    name: '购置详情',
    icon: gouzhi,
    url: '/xbgz/buylist'
  },
  {
    name: '绑定银行卡',
    icon: bangding,
    url: '/user/mybankCard'
  },
  {
    name: '实名认证',
    icon: shiming,
    url: '/user/shiming'
  }
])
const functions = ref([
  {
    name: '安全中心',
    icon: anquan,
    url: '/user/anquan'
  },
  {
    name: '在线客服',
    icon: kefu,
    url: kfurl.value
  },
  {
    name: '官方群聊',
    icon: guanfnag,
    url: '/user/group'
  },
  {
    name: '我的团队',
    icon: wodetuandui,
    url: '/user/myteam'
  }
])

// Router
const router = useRouter()

const gomx = (type) => {
  router.push(`/user/zjmx?type=${type}`)
}
// Methods
const formatPhone = (phone) => {
  if (!phone) return ''
  return phone.replace(/(\d{3})\d{4}(\d{4})/, '\$1****\$2')
}

const handleCopy = (code) => {
  navigator.clipboard.writeText(code)
    .then(() => {
      showToast('推广码已复制')
      console.log('推广码已复制')
    })
    .catch(err => {
      console.error('复制失败:', err)
    })
}

const handleClick = (url, flag) => {
  if (flag === 'kf') {
    if (url) {
      window.location.href = url
    } else {
      router.push('/login')
      showFailToast('客服链接错误,请重新登陆')
    }
  } else {
    router.push(url)
  }
}

const handleLogout = () => {
  showConfirmDialog({
    title: '提示',
    message: '确定退出登录吗？',
    confirmButtonText: '确定',
    cancelButtonText: '取消',
  }).then(() => {
    sessionStorage.clear()
    router.push('/login')
  })
}
let price = ref(0)
function isWebView() {
  // 检测是否在微信浏览器中
  const isWechat = /MicroMessenger/i.test(navigator.userAgent);

  // 检测是否在常见的移动浏览器中
  const isMobileBrowser = (
    /QQBrowser|UCBrowser|MiuiBrowser|Chrome|Firefox|Safari|Edge/i.test(navigator.userAgent) &&
    !window.webkit?.messageHandlers &&
    !window.JavascriptInterface
  );

  // 如果是微信或已知的移动浏览器，则认为不是 WebView
  if (isWechat || isMobileBrowser) {
    return false;
  }

  // 尝试调用 WebView 特有的方法或检查特有的对象
  try {
    return !!(
      window.webkit?.messageHandlers || // iOS WKWebView
      window.JavascriptInterface ||     // Android WebView
      window._dsBridge ||              // DSBridge
      window.WebViewJavascriptBridge || // 其他 WebView bridge
      // 可以根据实际项目中 WebView 注入的对象进行添加
      window.myWebViewBridge           // 假设这是你的 WebView 注入的对象
    );
  } catch (e) {
    return false;
  }
}
usePageHook({
  onPageShow: () => {
    request.get('/yw1/list').then(res => {
      price.value = res.data.length > 0 ? res.data[res.data.length - 1].a4 : 0
    });
    userInfo.value = JSON.parse(sessionStorage.getItem("userInfo") || "{}")
    if (userInfo.value.data == 'true') {
      if(!isWebView()){
        popupType.value = 'app'
        popup.value?.open()
      }
    } else {
      popupType.value = 'shiming'
      popup.value?.open()
    }
  }
});
</script>


<style scoped>
.yps1 {
  position: relative;
}

.yps1 .yps {
  position: absolute;
  right: 0;
  top: 0.05rem;
  color: #E72931;
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

* {
  box-sizing: border-box;
}

a {
  text-decoration: none;
}

ul {
  list-style: none;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

button,
input,
textarea,
select {
  border: none;
  outline: none;
  background: none;
  font: inherit;
}

/* 琛ㄦ牸鐨勮竟妗嗘竻闄� */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* 鍥剧墖鐨勯粯璁よ竟璺濇竻闄� */
img {
  display: block;
  max-width: 100%;
}

.ultraman_wrap_bg {
  width: 100%;
  max-width: 550px;
  min-height: 100vh;
  margin: 0 auto;
  padding-bottom: 30px;
  background-position: center;
  overflow: scroll;
  background: url('@/static/user/beijing.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  /* 淇濈暀婊氬姩鍔熻兘 */
  background-color: #fff;
}

.ultraman_wrap_bg::-webkit-scrollbar {
  display: none;
  /* 闅愯棌婊氬姩鏉� */
}

/* 椤堕儴 start ====================================================== */
.ultraman_head_bg {
  width: 50%;
  margin: 0 auto;
  margin-top: 20px;
}

.ultraman_head_bg img {
  width: 100%;
}

.ultraman_user_blk {
  width: 88%;
  margin: 0 auto;
  margin-top: 20px;
  color: #322c2b;
  display: flex;
  align-items: center;
}

.ultraman_user_img {
  width: 60px;
  border-radius: 50%;
}

.ultraman_user_info {
  flex: 1;
  margin-left: 12px;
}

.ultraman_user_name {
  font-size: 17px;
  font-weight: bold;
  letter-spacing: 1px;
}

.ultraman_user_code {
  font-size: 12px;
  letter-spacing: 1px;
}

/* 椤堕儴 end ====================================================== */

.ultraman_card_title {
  width: 88%;
  margin: 0 auto;
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px 20px 20px;
  background: url('@/static/user/qianbaoxiangqing.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  color: #fff;
}

.ultraman_bank_detail {
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 1px;
  color: #fff;
}

.ultraman_card_tag {
  display: flex;
  align-items: center;
  font-size: 12px;
  letter-spacing: 1px;
}

.ultraman_card_tag img {
  height: 10px;
  margin-left: 3px;
}

.ultraman_card_blk {
  width: 88%;
  margin: 0 auto;
  background-color: #fefefe;
  padding: 15px;
  border-radius: 15px;
  margin-top: -15px;
}

.ultraman_card_item {
  padding: 0 3px;
}

.ultraman_card_name {
  font-size: 14px;
  color: #a1a1a1;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ultraman_card_bot {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ultraman_card_num {
  font-size: 19px;
  font-weight: bold;
  letter-spacing: 1px;
  color: #464443;
}

.ultraman_card_detail {
  margin-top: 8px;
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #464443;
}

.ultraman_card_detail img {
  height: 10px;
  margin-left: 3px;
}

.ultraman_card_btns {
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ultraman_card_btn {
  color: #464443;
  font-size: 12px;
  border: 1px solid #b6b6b7;
  padding: 2px 10px;
  border-radius: 5px;
}

.ultraman_mglt {
  margin-right: 10px
}

.ultraman_card_hr {
  width: 100%;
  height: 1px;
  margin: 13px 0;
  background-color: #eeeeef;
}

.ultraman_banner {
  width: 88%;
  margin: 0 auto;
  margin-top: 16px;
}

.ultraman_banner img {
  width: 100%;
}

.ultraman_data_list {
  width: 88%;
  margin: 0 auto;
  margin-top: 16px;
  background-color: #fefefe;
  border-radius: 5px 5px 0 0;
  padding: 25px 22px 20px 22px;
}

.ultraman_data_list2 {
  width: 88%;
  margin: 0 auto;
  background-color: #fefefe;
  border-radius: 0 0 5px 5px;
  padding: 15px 22px 20px 22px;
}

.ultraman_data_name {
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 1px;
}

.ultraman_list_box {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ultraman_list_item {
  width: 25%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-size: 12px;
  color: #807e7d;
}

.ultraman_list_item img {
  width: 78%;
  margin-bottom: 6px;
}

.ultraman_data_hr {
  height: 14px;
  width: 88%;
  margin: -2px auto;
  background-color: #eeeeef;
}

.ultraman_btn {
  height: 38px;
  line-height: 38px;
  text-align: center;
  color: #fff;
  width: 88%;
  margin: 0 auto;
  margin-top: 18px;
  background: url('@/static/user/anquanntuichu.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.ultraman_foot {
  width: 68%;
  margin: 0 auto;
  margin-top: 20px;
}

.ultraman_foot img {
  width: 100%;
}
</style>