整合api请求、添加购买会员卡页面、登陆页面
This commit is contained in:
future
@@ -10,62 +10,50 @@
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import { ref, watch, onMounted, nextTick } from 'vue'
|
||||
import { drawRadarChart } from '@/common/memberInfo/bodyTestChart.js'
|
||||
|
||||
export default {
|
||||
options: {
|
||||
virtualHost: false,
|
||||
styleIsolation: 'apply-shared'
|
||||
},
|
||||
props: {
|
||||
labels: { type: Array, default: () => [] },
|
||||
values: { type: Array, default: () => [] },
|
||||
width: { type: Number, default: 280 },
|
||||
height: { type: Number, default: 240 }
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
canvasId: `bt-radar-${Math.random().toString(36).slice(2, 9)}`
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
values: {
|
||||
deep: true,
|
||||
handler() {
|
||||
this.renderChart()
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.renderChart()
|
||||
},
|
||||
methods: {
|
||||
renderChart() {
|
||||
this.$nextTick(() => {
|
||||
const query = uni.createSelectorQuery().in(this)
|
||||
query
|
||||
.select(`#${this.canvasId}`)
|
||||
.fields({ node: true, size: true })
|
||||
.exec((res) => {
|
||||
const node = res?.[0]?.node
|
||||
if (!node) return
|
||||
const dpr = uni.getSystemInfoSync().pixelRatio || 1
|
||||
drawRadarChart(node, {
|
||||
width: this.width,
|
||||
height: this.height,
|
||||
labels: this.labels,
|
||||
values: this.values,
|
||||
dpr
|
||||
})
|
||||
})
|
||||
const props = defineProps({
|
||||
labels: { type: Array, default: () => [] },
|
||||
values: { type: Array, default: () => [] },
|
||||
width: { type: Number, default: 280 },
|
||||
height: { type: Number, default: 240 }
|
||||
})
|
||||
|
||||
const canvasId = ref(`bt-radar-${Math.random().toString(36).slice(2, 9)}`)
|
||||
|
||||
function renderChart() {
|
||||
nextTick(() => {
|
||||
const query = uni.createSelectorQuery().in(getCurrentInstance())
|
||||
query
|
||||
.select(`#${canvasId.value}`)
|
||||
.fields({ node: true, size: true })
|
||||
.exec((res) => {
|
||||
const node = res?.[0]?.node
|
||||
if (!node) return
|
||||
const dpr = uni.getSystemInfoSync().pixelRatio || 1
|
||||
drawRadarChart(node, {
|
||||
width: props.width,
|
||||
height: props.height,
|
||||
labels: props.labels,
|
||||
values: props.values,
|
||||
dpr
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
watch(() => props.values, () => {
|
||||
renderChart()
|
||||
}, { deep: true })
|
||||
|
||||
onMounted(() => {
|
||||
renderChart()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<style lang="scss">
|
||||
.bt-radar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@@ -10,62 +10,50 @@
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import { ref, watch, onMounted, nextTick } from 'vue'
|
||||
import { drawTrendChart } from '@/common/memberInfo/bodyTestChart.js'
|
||||
|
||||
export default {
|
||||
options: {
|
||||
virtualHost: false,
|
||||
styleIsolation: 'apply-shared'
|
||||
},
|
||||
props: {
|
||||
points: { type: Array, default: () => [] },
|
||||
unit: { type: String, default: '' },
|
||||
width: { type: Number, default: 300 },
|
||||
height: { type: Number, default: 160 }
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
canvasId: `bt-trend-${Math.random().toString(36).slice(2, 9)}`
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
points: {
|
||||
deep: true,
|
||||
handler() {
|
||||
this.renderChart()
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.renderChart()
|
||||
},
|
||||
methods: {
|
||||
renderChart() {
|
||||
this.$nextTick(() => {
|
||||
const query = uni.createSelectorQuery().in(this)
|
||||
query
|
||||
.select(`#${this.canvasId}`)
|
||||
.fields({ node: true, size: true })
|
||||
.exec((res) => {
|
||||
const node = res?.[0]?.node
|
||||
if (!node) return
|
||||
const dpr = uni.getSystemInfoSync().pixelRatio || 1
|
||||
drawTrendChart(node, {
|
||||
width: this.width,
|
||||
height: this.height,
|
||||
points: this.points,
|
||||
unit: this.unit,
|
||||
dpr
|
||||
})
|
||||
})
|
||||
const props = defineProps({
|
||||
points: { type: Array, default: () => [] },
|
||||
unit: { type: String, default: '' },
|
||||
width: { type: Number, default: 300 },
|
||||
height: { type: Number, default: 160 }
|
||||
})
|
||||
|
||||
const canvasId = ref(`bt-trend-${Math.random().toString(36).slice(2, 9)}`)
|
||||
|
||||
function renderChart() {
|
||||
nextTick(() => {
|
||||
const query = uni.createSelectorQuery().in(getCurrentInstance())
|
||||
query
|
||||
.select(`#${canvasId.value}`)
|
||||
.fields({ node: true, size: true })
|
||||
.exec((res) => {
|
||||
const node = res?.[0]?.node
|
||||
if (!node) return
|
||||
const dpr = uni.getSystemInfoSync().pixelRatio || 1
|
||||
drawTrendChart(node, {
|
||||
width: props.width,
|
||||
height: props.height,
|
||||
points: props.points,
|
||||
unit: props.unit,
|
||||
dpr
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
watch(() => props.points, () => {
|
||||
renderChart()
|
||||
}, { deep: true })
|
||||
|
||||
onMounted(() => {
|
||||
renderChart()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<style lang="scss">
|
||||
.bt-trend {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@@ -102,31 +102,26 @@
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
options: {
|
||||
virtualHost: false,
|
||||
styleIsolation: 'apply-shared'
|
||||
},
|
||||
props: {
|
||||
report: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
date: '2024-07-01',
|
||||
weight: '63.5',
|
||||
bmi: '22.1',
|
||||
bodyFat: '24.8%',
|
||||
bmr: '165',
|
||||
status: '比较健康',
|
||||
change: '-1.2kg'
|
||||
})
|
||||
}
|
||||
},
|
||||
emits: ['view-history', 'view-report']
|
||||
}
|
||||
<script setup>
|
||||
defineProps({
|
||||
report: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
date: '2024-07-01',
|
||||
weight: '63.5',
|
||||
bmi: '22.1',
|
||||
bodyFat: '24.8%',
|
||||
bmr: '165',
|
||||
status: '比较健康',
|
||||
change: '-1.2kg'
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
defineEmits(['view-history', 'view-report'])
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<style lang="scss">
|
||||
@import '@/common/style/memberInfo/member-info-component-reset.css';
|
||||
@import '@/common/style/memberInfo/member-info-body-report.css';
|
||||
@import '@/common/style/memberInfo/member-info-tap.css';
|
||||
|
||||
@@ -77,28 +77,24 @@
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
options: {
|
||||
virtualHost: false,
|
||||
styleIsolation: 'apply-shared'
|
||||
},
|
||||
props: {
|
||||
items: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
emits: ['view-all', 'item-tap'],
|
||||
computed: {
|
||||
previewItems() {
|
||||
return this.items
|
||||
}
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
items: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
defineEmits(['view-all', 'item-tap'])
|
||||
|
||||
const previewItems = computed(() => {
|
||||
return props.items
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<style lang="scss">
|
||||
@import '@/common/style/memberInfo/member-info-component-reset.css';
|
||||
@import '@/common/style/memberInfo/member-info-booking-list.css';
|
||||
@import '@/common/style/memberInfo/member-info-tap.css';
|
||||
|
||||
@@ -64,23 +64,18 @@
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
options: {
|
||||
virtualHost: false,
|
||||
styleIsolation: 'apply-shared'
|
||||
},
|
||||
props: {
|
||||
items: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
emits: ['view-all', 'item-tap']
|
||||
}
|
||||
<script setup>
|
||||
defineProps({
|
||||
items: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
})
|
||||
|
||||
defineEmits(['view-all', 'item-tap'])
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<style lang="scss">
|
||||
@import '@/common/style/memberInfo/member-info-component-reset.css';
|
||||
@import '@/common/style/memberInfo/member-info-check-in-list.css';
|
||||
@import '@/common/style/memberInfo/member-info-tap.css';
|
||||
|
||||
@@ -55,30 +55,25 @@
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
options: {
|
||||
virtualHost: false,
|
||||
styleIsolation: 'apply-shared'
|
||||
},
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
amount: '¥50',
|
||||
couponDesc: '满500可用 · 1张',
|
||||
couponAction: '去使用',
|
||||
points: 1250,
|
||||
pointsLabel: '我的积分',
|
||||
pointsAction: '去兑换'
|
||||
})
|
||||
}
|
||||
},
|
||||
emits: ['view-all', 'use-coupon', 'redeem-points']
|
||||
}
|
||||
<script setup>
|
||||
defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
amount: '¥50',
|
||||
couponDesc: '满500可用 · 1张',
|
||||
couponAction: '去使用',
|
||||
points: 1250,
|
||||
pointsLabel: '我的积分',
|
||||
pointsAction: '去兑换'
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
defineEmits(['view-all', 'use-coupon', 'redeem-points'])
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<style lang="scss">
|
||||
@import '@/common/style/memberInfo/member-info-component-reset.css';
|
||||
@import '@/common/style/memberInfo/member-info-coupon-points.css';
|
||||
@import '@/common/style/memberInfo/member-info-tap.css';
|
||||
|
||||
@@ -22,8 +22,8 @@
|
||||
<view class="profile-header__toolbar-spacer" :style="toolbarSpacerStyle"></view>
|
||||
<!-- 用户信息区：深蓝渐变 -->
|
||||
<view class="profile-header__hero">
|
||||
<view class="profile-header__inner">
|
||||
<view class="profile-header__user" hover-class="mi-tap--hover" :hover-stay-time="150" @tap="$emit('user-info')">
|
||||
<view class="profile-header__inner" v-if="isLogin">
|
||||
<view class="profile-header__user" hover-class="mi-tap--hover" :hover-stay-time="150" @tap="handleUserTap">
|
||||
<view class="profile-header__user-inner">
|
||||
<view class="profile-header__avatar-wrap">
|
||||
<view class="profile-header__avatar-ring">
|
||||
@@ -44,7 +44,7 @@
|
||||
</view>
|
||||
<view class="profile-header__user-meta">
|
||||
<view class="profile-header__user-meta-inner">
|
||||
<text class="profile-header__name">{{ userInfo.name }}</text>
|
||||
<text class="profile-header__name">{{ userInfo.name || "活氧舱用户" }}</text>
|
||||
<text class="profile-header__phone">{{ userInfo.phone }}</text>
|
||||
<view class="profile-header__badge">
|
||||
<image
|
||||
@@ -82,69 +82,95 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="profile-header__inner" v-else>
|
||||
<view class="profile-header__user" hover-class="mi-tap--hover" :hover-stay-time="150" @tap="handleUserTap">
|
||||
<view
|
||||
class="profile-header__user-inner--guest"
|
||||
@tap="handleGuestLogin"
|
||||
>
|
||||
<view class="profile-header__avatar-wrap--guest">
|
||||
<image
|
||||
class="profile-header__avatar--guest"
|
||||
src="/static/OIP-C.png"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
</view>
|
||||
<view class="profile-header__user-meta--guest">
|
||||
<text class="profile-header__name--guest">小伙伴，点我登录</text>
|
||||
<text class="profile-header__phone--guest">陪你遇见更好的自己 ~</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
options: {
|
||||
virtualHost: false,
|
||||
styleIsolation: 'apply-shared'
|
||||
},
|
||||
props: {
|
||||
userInfo: { type: Object, required: true },
|
||||
stats: { type: Object, required: true }
|
||||
},
|
||||
emits: ['user-info'],
|
||||
computed: {
|
||||
displayAvatar() {
|
||||
return this.userInfo.avatar || 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/AvatarEditWrap.png'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
toolbarStyle: {},
|
||||
toolbarSpacerStyle: {},
|
||||
navRightStyle: {}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.syncNavSafeArea()
|
||||
},
|
||||
methods: {
|
||||
syncNavSafeArea() {
|
||||
try {
|
||||
const sys = uni.getSystemInfoSync()
|
||||
const statusBarHeight = sys.statusBarHeight || 0
|
||||
const navHeight = 44
|
||||
const menu = uni.getMenuButtonBoundingClientRect?.()
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
|
||||
this.toolbarStyle = {
|
||||
paddingTop: `${statusBarHeight}px`
|
||||
}
|
||||
const props = defineProps({
|
||||
userInfo: { type: Object, required: true },
|
||||
stats: { type: Object, required: true },
|
||||
isLogin: { type: Boolean }
|
||||
})
|
||||
|
||||
this.toolbarSpacerStyle = {
|
||||
height: `${statusBarHeight + navHeight}px`
|
||||
}
|
||||
|
||||
if (menu && menu.width) {
|
||||
const capsuleGap = sys.windowWidth - menu.left + 8
|
||||
this.navRightStyle = {
|
||||
width: `${capsuleGap}px`,
|
||||
minWidth: `${capsuleGap}px`
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
this.toolbarSpacerStyle = { height: '44px' }
|
||||
}
|
||||
}
|
||||
const emit = defineEmits(['user-info', 'guest-login'])
|
||||
|
||||
const displayAvatar = computed(() => {
|
||||
return props.userInfo.avatar || '/static/OC-default-headIamge.png'
|
||||
})
|
||||
|
||||
function handleUserTap() {
|
||||
if (props.isLogin) {
|
||||
emit('user-info')
|
||||
}
|
||||
}
|
||||
|
||||
function handleGuestLogin() {
|
||||
emit('guest-login')
|
||||
}
|
||||
|
||||
const toolbarStyle = ref({})
|
||||
const toolbarSpacerStyle = ref({})
|
||||
const navRightStyle = ref({})
|
||||
|
||||
function syncNavSafeArea() {
|
||||
try {
|
||||
const sys = uni.getSystemInfoSync()
|
||||
const statusBarHeight = sys.statusBarHeight || 0
|
||||
const navHeight = 44
|
||||
const menu = uni.getMenuButtonBoundingClientRect?.()
|
||||
|
||||
toolbarStyle.value = {
|
||||
paddingTop: `${statusBarHeight}px`
|
||||
}
|
||||
|
||||
toolbarSpacerStyle.value = {
|
||||
height: `${statusBarHeight + navHeight}px`
|
||||
}
|
||||
|
||||
if (menu && menu.width) {
|
||||
const capsuleGap = sys.windowWidth - menu.left + 8
|
||||
navRightStyle.value = {
|
||||
width: `${capsuleGap}px`,
|
||||
minWidth: `${capsuleGap}px`
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
toolbarSpacerStyle.value = { height: '44px' }
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
syncNavSafeArea()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<style lang="scss">
|
||||
@import '@/common/style/memberInfo/member-info-component-reset.css';
|
||||
@import '@/common/style/memberInfo/member-info-header.css';
|
||||
@import '@/common/style/memberInfo/member-info-tap.css';
|
||||
|
||||
@@ -16,16 +16,10 @@
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
options: {
|
||||
virtualHost: false,
|
||||
styleIsolation: 'apply-shared'
|
||||
},
|
||||
emits: ['logout']
|
||||
}
|
||||
<script setup>
|
||||
defineEmits(['logout'])
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<style lang="scss">
|
||||
@import '@/common/style/memberInfo/member-info-logout.css';
|
||||
</style>
|
||||
|
||||
@@ -35,7 +35,7 @@
|
||||
>
|
||||
<view
|
||||
class="member-card-preview__icon-wrap"
|
||||
>
|
||||
>
|
||||
<view
|
||||
class="member-card-preview__icon-border"
|
||||
>
|
||||
@@ -94,6 +94,18 @@
|
||||
续费
|
||||
</text>
|
||||
</view>
|
||||
<view
|
||||
class="member-card-preview__purchase"
|
||||
hover-class="mi-tap-btn--hover"
|
||||
:hover-stay-time="150"
|
||||
@tap.stop="$emit('purchase')"
|
||||
>
|
||||
<text
|
||||
class="member-card-preview__purchase-text"
|
||||
>
|
||||
购买新卡
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -115,20 +127,15 @@
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
options: {
|
||||
virtualHost: false,
|
||||
styleIsolation: 'apply-shared'
|
||||
},
|
||||
props: {
|
||||
cardInfo: { type: Object, required: true }
|
||||
},
|
||||
emits: ['view-all', 'renew'],
|
||||
}
|
||||
<script setup>
|
||||
defineProps({
|
||||
cardInfo: { type: Object, required: true }
|
||||
})
|
||||
|
||||
defineEmits(['view-all', 'renew', 'purchase'])
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<style lang="scss">
|
||||
@import '@/common/style/memberInfo/member-info-component-reset.css';
|
||||
@import '@/common/style/memberInfo/member-info-member-card.css';
|
||||
@import '@/common/style/memberInfo/member-info-tap.css';
|
||||
|
||||
@@ -83,33 +83,27 @@
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
options: {
|
||||
virtualHost: false,
|
||||
styleIsolation: 'apply-shared'
|
||||
},
|
||||
emits: ['action'],
|
||||
data() {
|
||||
return {
|
||||
row1: [
|
||||
{ key: 'booking', label: '预约课程', textClass: 'quick-actions__title', icon: '' },
|
||||
{ key: 'bodyTest', label: '智能体测', textClass: 'quick-actions__title-2', icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/mappin2.png' },
|
||||
{ key: 'bodyReport', label: '体测报告', textClass: 'quick-actions__title-3', icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/activity.png' },
|
||||
{ key: 'trainReport', label: '训练报告', textClass: 'quick-actions__coach', icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/usercheck.png' }
|
||||
],
|
||||
row2: [
|
||||
{ key: 'coupon', label: '我的优惠券', textClass: 'quick-actions__text', icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/ticket.png' },
|
||||
{ key: 'points', label: '我的积分', textClass: 'quick-actions__points-desc', icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/star.png' },
|
||||
{ key: 'referral', label: '邀请好友', textClass: 'quick-actions__title-4', icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/share2.png' },
|
||||
{ key: 'course', label: '我的课程', textClass: 'quick-actions__text-2', icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/play.png' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
defineEmits(['action'])
|
||||
|
||||
const row1 = ref([
|
||||
{ key: 'booking', label: '预约课程', textClass: 'quick-actions__title', icon: '' },
|
||||
{ key: 'bodyTest', label: '智能体测', textClass: 'quick-actions__title-2', icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/mappin2.png' },
|
||||
{ key: 'bodyReport', label: '体测报告', textClass: 'quick-actions__title-3', icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/activity.png' },
|
||||
{ key: 'trainReport', label: '训练报告', textClass: 'quick-actions__coach', icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/usercheck.png' }
|
||||
])
|
||||
|
||||
const row2 = ref([
|
||||
{ key: 'coupon', label: '我的优惠券', textClass: 'quick-actions__text', icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/ticket.png' },
|
||||
{ key: 'points', label: '我的积分', textClass: 'quick-actions__points-desc', icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/star.png' },
|
||||
{ key: 'referral', label: '邀请好友', textClass: 'quick-actions__title-4', icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/share2.png' },
|
||||
{ key: 'course', label: '我的课程', textClass: 'quick-actions__text-2', icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/play.png' }
|
||||
])
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<style lang="scss">
|
||||
@import '@/common/style/memberInfo/member-info-component-reset.css';
|
||||
@import '@/common/style/memberInfo/member-info-quick-actions.css';
|
||||
@import '@/common/style/memberInfo/member-info-tap.css';
|
||||
|
||||
@@ -63,38 +63,34 @@
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
options: {
|
||||
virtualHost: false,
|
||||
styleIsolation: 'apply-shared'
|
||||
},
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
code: 'FIT-ZXF-2024',
|
||||
invited: 5,
|
||||
registered: 3,
|
||||
purchased: 2
|
||||
})
|
||||
}
|
||||
},
|
||||
emits: ['view-rules'],
|
||||
methods: {
|
||||
copyCode() {
|
||||
uni.setClipboardData({
|
||||
data: this.data.code,
|
||||
success: () => {
|
||||
uni.showToast({ title: '已复制', icon: 'success' })
|
||||
}
|
||||
})
|
||||
}
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
code: 'FIT-ZXF-2024',
|
||||
invited: 5,
|
||||
registered: 3,
|
||||
purchased: 2
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
defineEmits(['view-rules'])
|
||||
|
||||
function copyCode() {
|
||||
uni.setClipboardData({
|
||||
data: props.data.code,
|
||||
success: () => {
|
||||
uni.showToast({ title: '已复制', icon: 'success' })
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<style lang="scss">
|
||||
@import '@/common/style/memberInfo/member-info-component-reset.css';
|
||||
@import '@/common/style/memberInfo/member-info-referral.css';
|
||||
@import '@/common/style/memberInfo/member-info-tap.css';
|
||||
|
||||
@@ -55,55 +55,48 @@
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
options: {
|
||||
virtualHost: false,
|
||||
styleIsolation: 'apply-shared'
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
defineEmits(['setting'])
|
||||
|
||||
const items = ref([
|
||||
{
|
||||
key: 'notify',
|
||||
label: '通知设置',
|
||||
icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/bell.png',
|
||||
iconWrapClass: ''
|
||||
},
|
||||
emits: ['setting'],
|
||||
data() {
|
||||
return {
|
||||
items: [
|
||||
{
|
||||
key: 'notify',
|
||||
label: '通知设置',
|
||||
icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/bell.png',
|
||||
iconWrapClass: ''
|
||||
},
|
||||
{
|
||||
key: 'password',
|
||||
label: '修改密码',
|
||||
icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/Vector_2_727.png',
|
||||
iconWrapClass: 'settings-section__item-icon-wrap--blue'
|
||||
},
|
||||
{
|
||||
key: 'privacy',
|
||||
label: '隐私政策',
|
||||
icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/shield.png',
|
||||
iconWrapClass: 'settings-section__item-icon-wrap--green'
|
||||
},
|
||||
{
|
||||
key: 'nfc',
|
||||
label: 'NFC 门禁卡',
|
||||
subtitle: '已绑定',
|
||||
icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/ticket.png',
|
||||
iconWrapClass: ''
|
||||
},
|
||||
{
|
||||
key: 'delete',
|
||||
label: '注销账户',
|
||||
icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/userx.png',
|
||||
iconWrapClass: 'settings-section__item-icon-wrap--red',
|
||||
labelClass: 'settings-section__item-label--danger'
|
||||
}
|
||||
]
|
||||
}
|
||||
{
|
||||
key: 'password',
|
||||
label: '修改密码',
|
||||
icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/Vector_2_727.png',
|
||||
iconWrapClass: 'settings-section__item-icon-wrap--blue'
|
||||
},
|
||||
{
|
||||
key: 'privacy',
|
||||
label: '隐私政策',
|
||||
icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/shield.png',
|
||||
iconWrapClass: 'settings-section__item-icon-wrap--green'
|
||||
},
|
||||
{
|
||||
key: 'nfc',
|
||||
label: 'NFC 门禁卡',
|
||||
subtitle: '已绑定',
|
||||
icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/ticket.png',
|
||||
iconWrapClass: ''
|
||||
},
|
||||
{
|
||||
key: 'delete',
|
||||
label: '注销账户',
|
||||
icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/userx.png',
|
||||
iconWrapClass: 'settings-section__item-icon-wrap--red',
|
||||
labelClass: 'settings-section__item-label--danger'
|
||||
}
|
||||
}
|
||||
])
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<style lang="scss">
|
||||
@import '@/common/style/memberInfo/member-info-component-reset.css';
|
||||
@import '@/common/style/memberInfo/member-info-settings.css';
|
||||
</style>
|
||||
|
||||
@@ -7,14 +7,8 @@
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
options: {
|
||||
virtualHost: true,
|
||||
styleIsolation: 'apply-shared'
|
||||
},
|
||||
props: {
|
||||
statusBarTime: { type: String, default: '9:41' }
|
||||
},
|
||||
}
|
||||
<script setup>
|
||||
defineProps({
|
||||
statusBarTime: { type: String, default: '9:41' }
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -27,80 +27,75 @@
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
options: {
|
||||
virtualHost: false,
|
||||
styleIsolation: 'apply-shared'
|
||||
},
|
||||
props: {
|
||||
title: { type: String, required: true },
|
||||
rightText: { type: String, default: '' },
|
||||
actionButton: { type: Boolean, default: false }
|
||||
},
|
||||
emits: ['back', 'right-action'],
|
||||
data() {
|
||||
return {
|
||||
toolbarStyle: {},
|
||||
toolbarSpacerStyle: {},
|
||||
capsuleStyle: {},
|
||||
isH5: false
|
||||
<script setup>
|
||||
import { ref, onMounted, nextTick } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
title: { type: String, required: true },
|
||||
rightText: { type: String, default: '' },
|
||||
actionButton: { type: Boolean, default: false }
|
||||
})
|
||||
|
||||
defineEmits(['back', 'right-action'])
|
||||
|
||||
const toolbarStyle = ref({})
|
||||
const toolbarSpacerStyle = ref({})
|
||||
const capsuleStyle = ref({})
|
||||
const isH5 = ref(false)
|
||||
|
||||
function syncNavSafeArea() {
|
||||
try {
|
||||
const sys = uni.getSystemInfoSync()
|
||||
const statusBarHeight = sys.statusBarHeight || 0
|
||||
const navHeight = 44
|
||||
const extraGap = 4
|
||||
const menu = uni.getMenuButtonBoundingClientRect?.()
|
||||
|
||||
// #ifdef H5
|
||||
isH5.value = true
|
||||
// #endif
|
||||
// #ifndef H5
|
||||
isH5.value = false
|
||||
// #endif
|
||||
if (!isH5.value && typeof window !== 'undefined' && !menu?.width) {
|
||||
isH5.value = sys.uniPlatform === 'web' || sys.platform === 'web'
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.syncNavSafeArea()
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => this.syncNavSafeArea(), 50)
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
syncNavSafeArea() {
|
||||
try {
|
||||
const sys = uni.getSystemInfoSync()
|
||||
const statusBarHeight = sys.statusBarHeight || 0
|
||||
const navHeight = 44
|
||||
const extraGap = 4
|
||||
const menu = uni.getMenuButtonBoundingClientRect?.()
|
||||
// #ifdef H5
|
||||
this.isH5 = true
|
||||
// #endif
|
||||
// #ifndef H5
|
||||
this.isH5 = false
|
||||
// #endif
|
||||
if (!this.isH5 && typeof window !== 'undefined' && !menu?.width) {
|
||||
this.isH5 = sys.uniPlatform === 'web' || sys.platform === 'web'
|
||||
}
|
||||
|
||||
this.toolbarStyle = {
|
||||
paddingTop: `${statusBarHeight}px`
|
||||
}
|
||||
toolbarStyle.value = {
|
||||
paddingTop: `${statusBarHeight}px`
|
||||
}
|
||||
|
||||
this.toolbarSpacerStyle = {
|
||||
height: `${statusBarHeight + navHeight + extraGap}px`
|
||||
}
|
||||
toolbarSpacerStyle.value = {
|
||||
height: `${statusBarHeight + navHeight + extraGap}px`
|
||||
}
|
||||
|
||||
if (!this.isH5 && menu && menu.width) {
|
||||
const capsuleGap = sys.windowWidth - menu.left + 8
|
||||
this.capsuleStyle = {
|
||||
width: `${capsuleGap}px`,
|
||||
minWidth: `${capsuleGap}px`
|
||||
}
|
||||
} else {
|
||||
this.capsuleStyle = {
|
||||
width: '0px',
|
||||
minWidth: '0px'
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
this.toolbarSpacerStyle = { height: '44px' }
|
||||
this.isH5 = true
|
||||
this.capsuleStyle = { width: '0px', minWidth: '0px' }
|
||||
if (!isH5.value && menu && menu.width) {
|
||||
const capsuleGap = sys.windowWidth - menu.left + 8
|
||||
capsuleStyle.value = {
|
||||
width: `${capsuleGap}px`,
|
||||
minWidth: `${capsuleGap}px`
|
||||
}
|
||||
} else {
|
||||
capsuleStyle.value = {
|
||||
width: '0px',
|
||||
minWidth: '0px'
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
toolbarSpacerStyle.value = { height: '44px' }
|
||||
isH5.value = true
|
||||
capsuleStyle.value = { width: '0px', minWidth: '0px' }
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
syncNavSafeArea()
|
||||
nextTick(() => {
|
||||
setTimeout(() => syncNavSafeArea(), 50)
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<style lang="scss">
|
||||
@import '@/common/style/memberInfo/member-info-sub-nav.css';
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user