beauty-miniapp-uni/pages/member/index.vue

<template>
  <view class="container">
    <view class="card profile">
      <view class="row between">
        <view class="row">
          <image class="avatar" :src="avatarUrl" mode="aspectFill" />
          <view class="uinfo">
            <view class="u">微信用户</view>
            <view class="muted s">会员档案 · {{ tag }}</view>
          </view>
        </view>
        <view class="badge">VIP</view>
      </view>

      <view class="stats row">
        <view class="st">
          <view class="v">{{ points }}</view>
          <view class="muted l">积分</view>
        </view>
        <view class="sep"></view>
        <view class="st">
          <view class="v">¥{{ balance }}</view>
          <view class="muted l">储值</view>
        </view>
        <view class="sep"></view>
        <view class="st">
          <view class="v">{{ visitCount }}</view>
          <view class="muted l">到店</view>
        </view>
      </view>
    </view>

    <view class="card menu">
      <view class="cell row between" @tap="goAppointments">
        <view class="c-l">
          <view class="c-t">我的预约</view>
          <view class="muted c-s">待到店 / 改约 / 取消</view>
        </view>
        <view class="arr">›</view>
      </view>
      <view class="cell row between" @tap="goCoupons">
        <view class="c-l">
          <view class="c-t">我的卡券 / 次卡</view>
          <view class="muted c-s">剩余次数 / 去使用</view>
        </view>
        <view class="arr">›</view>
      </view>
      <view class="cell row between" @tap="goRecords">
        <view class="c-l">
          <view class="c-t">消费记录</view>
          <view class="muted c-s">近 7 天 / 30 天</view>
        </view>
        <view class="arr">›</view>
      </view>
      <view class="cell row between" @tap="goSkin">
        <view class="c-l">
          <view class="c-t">我的肤质档案</view>
          <view class="muted c-s">肤质 / 需求 / 建议</view>
        </view>
        <view class="arr">›</view>
      </view>
      <view class="cell row between" @tap="goMsg">
        <view class="c-l">
          <view class="c-t">消息提醒</view>
          <view class="muted c-s">预约成功 / 到店提醒</view>
        </view>
        <view class="arr">›</view>
      </view>
      <view class="cell row between" @tap="goStore">
        <view class="c-l">
          <view class="c-t">门店设置</view>
          <view class="muted c-s">地址 / 电话 / 技师团队</view>
        </view>
        <view class="arr">›</view>
      </view>
    </view>

    <view class="card block">
      <view class="title">定位与附近流量</view>
      <view class="muted line">用于附近门店匹配与推荐展示</view>
      <view class="btn btn-ghost loc" @tap="getLoc">获取定位</view>
      <view class="muted line" v-if="locText">{{ locText }}</view>
    </view>

    <view class="card foot">
      <view class="row between">
        <view class="muted">版本 {{ version }}</view>
        <view class="kefu" @tap="call">联系客服</view>
      </view>
    </view>

    <AiFloat />
  </view>
</template>

<script>
import AiFloat from '@/components/AiFloat.vue'
import { storeProfile } from '@/common/mockData'

export default {
  components: { AiFloat },
  data() {
    return {
      avatarUrl:
        'https://coresg-normal.trae.ai/api/ide/v1/text_to_image?prompt=photorealistic%20portrait%20avatar%2C%20friendly%20woman%2C%20clean%20background%2C%20soft%20studio%20lighting%2C%20high-end%20beauty%20brand%20style%2C%2035mm%2C%20ultra%20detail&image_size=square',
      points: 1260,
      balance: 200,
      visitCount: 12,
      tag: '敏感肌 · 高复购',
      locText: '',
      version: '1.0.0',
      store: storeProfile
    }
  },
  methods: {
    goAppointments() {
      uni.navigateTo({ url: '/pages/appointments/list' })
    },
    goCoupons() {
      uni.navigateTo({ url: '/pages/coupons/list' })
    },
    goRecords() {
      uni.navigateTo({ url: '/pages/records/list' })
    },
    goSkin() {
      uni.navigateTo({ url: '/pages/profile/skin' })
    },
    goMsg() {
      uni.navigateTo({ url: '/pages/messages/settings' })
    },
    goStore() {
      uni.navigateTo({ url: '/pages/store/detail' })
    },
    getLoc() {
      uni.getLocation({
        type: 'gcj02',
        success: (res) => {
          this.locText = `已获取：${res.latitude.toFixed(6)}, ${res.longitude.toFixed(6)}`
        },
        fail: () => {
          uni.showToast({ title: '未授权定位', icon: 'none' })
        }
      })
    },
    call() {
      uni.makePhoneCall({ phoneNumber: this.store.phone })
    }
  }
}
</script>

<style lang="scss" scoped>
.profile {
  padding: 26rpx;
}
.avatar {
  width: 88rpx;
  height: 88rpx;
  border-radius: 999rpx;
  background: rgba(17, 24, 39, 0.06);
  border: 1rpx solid rgba(17, 24, 39, 0.08);
}
.uinfo {
  margin-left: 18rpx;
}
.u {
  font-size: 38rpx;
  font-weight: 950;
}
.s {
  margin-top: 10rpx;
  font-size: 26rpx;
}
.badge {
  padding: 12rpx 16rpx;
  border-radius: 999rpx;
  background: rgba(59, 130, 246, 0.14);
  color: #1d4ed8;
  font-size: 24rpx;
  font-weight: 950;
}
.stats {
  margin-top: 22rpx;
  padding: 18rpx;
  border-radius: 18rpx;
  background: rgba(17, 24, 39, 0.04);
}
.st {
  flex: 1;
}
.v {
  font-size: 32rpx;
  font-weight: 950;
}
.l {
  margin-top: 6rpx;
  font-size: 24rpx;
}
.sep {
  width: 1rpx;
  height: 48rpx;
  background: rgba(17, 24, 39, 0.08);
}
.menu {
  margin-top: 18rpx;
  padding: 10rpx 22rpx;
}
.cell {
  padding: 18rpx 0;
  border-top: 1rpx solid rgba(17, 24, 39, 0.08);
}
.cell:first-of-type {
  border-top: 0;
}
.c-t {
  font-size: 30rpx;
  font-weight: 950;
}
.c-s {
  margin-top: 8rpx;
  font-size: 24rpx;
}
.arr {
  font-size: 40rpx;
  color: rgba(17, 24, 39, 0.4);
  margin-left: 16rpx;
}
.block {
  padding: 22rpx;
  margin-top: 18rpx;
}
.title {
  font-weight: 950;
  font-size: 30rpx;
  margin-bottom: 10rpx;
}
.line {
  padding: 8rpx 0;
  font-size: 26rpx;
}
.loc {
  margin-top: 10rpx;
}
.foot {
  margin-top: 18rpx;
  padding: 18rpx 22rpx;
}
.kefu {
  padding: 12rpx 16rpx;
  border-radius: 999rpx;
  background: rgba(17, 24, 39, 0.06);
  font-size: 26rpx;
  font-weight: 900;
}
</style>