jwl-applet/src/pages/me/index.vue

<template>
	<view class="bc-f5">
    <!-- <view class="wp100" style="background-color: #333;height: 205px;"></view> -->
    <view class="relative" style="height: 205px;">
      <image src="/static/image/mine/mine_bg.png" mode="widthFix" style="width: 100%;"></image>
      <view class="info flex ai-c">
        <u-avatar class="br-p50 overflow-h" :size="64" :src="user.avatar" mp-avatar  shape="circle"></u-avatar>
        <view class="ml12">
          <view class="flex ai-c fs18 cor-333 fwb">
            <text class="mr10">{{user.name}}</text>
            <image src="/static/image/mine/vip.png" mode="widthFix" style="width: 18px;"></image>
          </view>
          <view class="mt5 fs14 cor-666">陪您学车 第{{user.count}}天</view>
        </view>
      </view>
    </view>
    <view class="p15lr" style="transform: translateY(-90px);">
      <view class="relative mb10" @tap="handleVip">
        <image src="/static/image/mine/vip_bg.png" mode="widthFix" style="width: 100%;"></image>
        <view class="absolute p15lr p10tb flex ai-c jc-sb" style="left: 0;top: 0;right: 0;height: 40px;">
          <view class="flex ai-c">
            <view class="p3 br-p50" style="background-color: #873E1D;">
              <image src="/static/image/mine/vip.png" mode="widthFix" style="width: 18px;height: 15px;"></image>
            </view>
            <text class="ml5 fs16 fwb" style="color: #7E4012FF;">VIP会员</text>
          </view>
          <text class="fs12" style="color: #7E4012FF;">2024-12-12到期</text>
        </view>
        <view class="absolute flex ai-c jc-c" style="left: 0;top: 40px;right: 0;bottom: 0;">
          <view class="text-center">
            <view class="fs18 fwb" style="color: #7E4012FF;">尊享科目一二三四全部付费权益</view>
            <view class="study fs16 text-center" style="margin: 25px auto 0;color: #F6E99FFF;">
              马上学习
            </view>
          </view>
        </view>
      </view>
      <view class="br8 bc-fff p15 z-index2">
        <text class="fs16 cor-333">我的驾校</text>
        <div class="mt12 flex ai-c jc-sb">
          <text class="fs18 cor-000 fwb">合肥八一驾校</text>
          <u-button text="切换驾校" shape="circle" @click="handleChangeSchool"></u-button>
        </div>
        <u-line margin="14px 0 18px 0"></u-line>
        <view class="flex ai-c" @tap="handleCallPhone">
          <view class="flex ai-c jc-c phone">
            <img src="/static/image/mine/phone.png" style="width: 12px;height: 12px;">
            <text class="ml2 fs12 cor-fff">客服热线</text>
          </view>
          <text class="ml5 fs26 cor-333 fwb" style="line-height: 26px;">0551-12345678</text>
        </view>
      </view>
      <view class="mt12 bc-fff br8">
        <u-cell-group>
        	<u-cell size="large" title="我的资料" value="修改" isLink url="/pages/me/info">
            <template #icon>
              <img src="/static/image/mine/wdzl.png" style="width: 24px;height: 24px;">
            </template>
          </u-cell>
        	<u-cell size="large" title="我的体检" value="查看报告" isLink url="/pages/me/tijian">
            <template #icon>
              <img src="/static/image/mine/wdtj.png" style="width: 24px;height: 24px;">
            </template>
          </u-cell>
        	<u-cell size="large" title="我的题库" value="小车">
            <template #icon>
              <img src="/static/image/mine/wdtk.png" style="width: 24px;height: 24px;">
            </template>
          </u-cell>
        </u-cell-group>
      </view>
      <view class="flex ai-c jc-c mt12 br8 bc-fff" style="height: 50px;">
        <text class="fs16" style="color: #A09F9F;">退出登录</text>
      </view>
    </view>
	</view>
</template>
<script>
	export default {
		components: {},
		data() {
			return {
        user: {
          avatar: '',
          name: '帅帅的黑啤酒',
          count: '215'
        }
			};
		},
		onShow() {
			//加载
		},
		onLoad() {

		},
		methods: {
      handleVip() {
        uni.navigateTo({
          url: '/pages/me/vip'
        })
      },
      handleCallPhone() {
        uni.makePhoneCall({
          phoneNumber: '17318531354'
        })
      },
      handleChangeSchool() {
        uni.navigateTo({
          url: '/pages/me/school'
        })
      }
		}
	}
</script>

<style lang="scss" scoped>
.info {
  position: absolute;
  top: 32px;
  left: 27px;
}
.phone {
  width: 75px;
  height: 26px;
  background: #05C341;
  border-radius: 16px 16px 0px 16px;
}
.study {
  width: 200px;
  height: 35px;
  line-height: 35px;
  background: #7E4012;
  border-radius: 35px;
}
</style>