jpcj-h5/src/views/home/children/user/index.vue

<template>
  <div class="user">
    <van-cell label="未绑定手机号" is-link center>
      <template #icon>
        <m-user-avatar class="user-avatar" />
      </template>
      <template #title>
        <m-user-name />
      </template>
    </van-cell>
    <van-cell-group class="group">
      <van-cell title="我要提现" value="" is-link center @click="goCashOut">
        <template #icon>
          <m-icon type="hyyxq" class="cell-icon" />
        </template>
      </van-cell>
      <van-cell
        title="会员有效期"
        :value="expireTime ? expireTime : '开通会员'"
        is-link
        center
        @click="goBuyVip"
      >
        <template #icon>
          <m-icon type="hyyxq" class="cell-icon" />
        </template>
      </van-cell>
    </van-cell-group>
    <van-cell-group class="group">
      <van-cell
        title="0.01捐款（内部专用）"
        is-link
        center
        @click="loopPrepareOrder"
      >
        <template #icon>
          <m-icon type="fkbz" class="cell-icon" />
        </template>
      </van-cell>
      <van-cell
        title="反馈帮助"
        is-link
        center
        url="https://support.qq.com/product/359609"
      >
        <template #icon>
          <m-icon type="fkbz" class="cell-icon" />
        </template>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script lang="ts">
import { useExpireTime, RouterBus } from "@/hooks";
</script>

<script lang="ts" setup>
import { loopPrepareOrder } from "@/api";
const { expireTime } = useExpireTime();
const { goBuyVip, goCashOut } = new RouterBus();
</script>

<style scoped lang="scss">
.user {
  background-color: #f2f3f5;
  height: 100vh;
  .group {
    margin: 10px 0;
  }
  .user-avatar {
    width: 46px;
    height: 46px;
    margin-right: 10px;
  }
}
.cell-icon {
  margin-right: 5px;
}
</style>