|
@@ -37,7 +37,9 @@ export default defineComponent({
|
|
|
{ text: '交付团' },
|
|
|
{ text: '晋升团' }
|
|
|
],
|
|
|
- id: route.query.id
|
|
|
+ id: route.query.id,
|
|
|
+ heightV: 0 as number,
|
|
|
+ scrollTop: 0 as number
|
|
|
})
|
|
|
|
|
|
const forms = reactive({
|
|
@@ -109,10 +111,16 @@ export default defineComponent({
|
|
|
onMounted(() => {
|
|
|
getList()
|
|
|
getDetail()
|
|
|
+ window.addEventListener('scroll', handleScroll)
|
|
|
})
|
|
|
- const onBack = () => {
|
|
|
- console.log('返回')
|
|
|
- router.push('/exercise-record')
|
|
|
+ const handleScroll = () => {
|
|
|
+ const scrollTop =
|
|
|
+ window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
|
|
|
+ state.scrollTop = scrollTop
|
|
|
+ }
|
|
|
+ const getHeight = (dataHeight: number) => {
|
|
|
+ state.heightV = dataHeight
|
|
|
+ console.log(dataHeight, 'dataHeight')
|
|
|
}
|
|
|
|
|
|
const checkTimer = (val: any) => {
|
|
@@ -132,12 +140,11 @@ export default defineComponent({
|
|
|
}
|
|
|
return () => (
|
|
|
<>
|
|
|
- <OSticky position="top" background="#F8F8F8">
|
|
|
- <div class={styles.topWrap}>
|
|
|
+ <div class={styles.topWrap}>
|
|
|
+ <OSticky position="top" background="#F8F8F8" onGetHeight={getHeight}>
|
|
|
<OHeader
|
|
|
- // onHeaderBack={onBack}
|
|
|
border={false}
|
|
|
- background={'transparent'}
|
|
|
+ background={state.heightV > state.scrollTop ? 'transparent' : '#fff'}
|
|
|
>
|
|
|
{{
|
|
|
right: () => (
|
|
@@ -152,50 +159,48 @@ export default defineComponent({
|
|
|
)
|
|
|
}}
|
|
|
</OHeader>
|
|
|
- <div class={styles.topInfo}>
|
|
|
- <div class={styles.topInfoLeft}>
|
|
|
- <div class={styles.headWrap}>
|
|
|
- <img
|
|
|
- src={infoDetail.value.avatar ? infoDetail.value.avatar : defaultIcon}
|
|
|
- alt=""
|
|
|
- />
|
|
|
- </div>
|
|
|
- <div class={styles.infoMsg}>
|
|
|
- <p>{infoDetail.value.nickname}</p>
|
|
|
- <div class={styles.tag}>{infoDetail.value.subjectNames}</div>
|
|
|
- </div>
|
|
|
+ </OSticky>
|
|
|
+ <div class={styles.topInfo}>
|
|
|
+ <div class={styles.topInfoLeft}>
|
|
|
+ <div class={styles.headWrap}>
|
|
|
+ <img src={infoDetail.value.avatar ? infoDetail.value.avatar : defaultIcon} alt="" />
|
|
|
</div>
|
|
|
- <div class={styles.topInfoRight}>
|
|
|
- <div class={styles.infoDay}>
|
|
|
- <p class={styles.infoDayMain}>
|
|
|
- {infoDetail.value.practiceDays ? infoDetail.value.practiceDays : 0}{' '}
|
|
|
- <span>天</span>
|
|
|
- </p>
|
|
|
- <p class={styles.infoDaysub}>练习天数</p>
|
|
|
- </div>
|
|
|
- <div class={styles.infoTime}>
|
|
|
- <p class={styles.infoDayMain}>
|
|
|
- {infoDetail.value.practiceTimes ? infoDetail.value.practiceTimes : 0}{' '}
|
|
|
- <span>分钟</span>
|
|
|
- </p>
|
|
|
- <p class={styles.infoDaysub}>练习时长</p>
|
|
|
- </div>
|
|
|
+ <div class={styles.infoMsg}>
|
|
|
+ <p>{infoDetail.value.nickname}</p>
|
|
|
+ <div class={styles.tag}>{infoDetail.value.subjectNames}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class={styles.chioseWrap}>
|
|
|
- <div style={{ padding: '12px 13px', background: 'transparent' }}>
|
|
|
- <div
|
|
|
- class={styles.searchBand}
|
|
|
- onClick={() => {
|
|
|
- state.showPopoverTime = true
|
|
|
- }}
|
|
|
- >
|
|
|
- {forms.practiceMonthName}
|
|
|
- <Icon name={state.showPopoverTime ? 'arrow-up' : 'arrow-down'} />
|
|
|
- </div>
|
|
|
+ <div class={styles.topInfoRight}>
|
|
|
+ <div class={styles.infoDay}>
|
|
|
+ <p class={styles.infoDayMain}>
|
|
|
+ {infoDetail.value.practiceDays ? infoDetail.value.practiceDays : 0}{' '}
|
|
|
+ <span>天</span>
|
|
|
+ </p>
|
|
|
+ <p class={styles.infoDaysub}>练习天数</p>
|
|
|
+ </div>
|
|
|
+ <div class={styles.infoTime}>
|
|
|
+ <p class={styles.infoDayMain}>
|
|
|
+ {infoDetail.value.practiceTimes ? infoDetail.value.practiceTimes : 0}{' '}
|
|
|
+ <span>分钟</span>
|
|
|
+ </p>
|
|
|
+ <p class={styles.infoDaysub}>练习时长</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class={styles.chioseWrap}>
|
|
|
+ <div style={{ padding: '12px 13px', background: 'transparent' }}>
|
|
|
+ <div
|
|
|
+ class={styles.searchBand}
|
|
|
+ onClick={() => {
|
|
|
+ state.showPopoverTime = true
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ {forms.practiceMonthName}
|
|
|
+ <Icon name={state.showPopoverTime ? 'arrow-up' : 'arrow-down'} />
|
|
|
</div>
|
|
|
+ </div>
|
|
|
|
|
|
- {/* <div style={{ padding: '12px 13px', background: 'transparent' }}>
|
|
|
+ {/* <div style={{ padding: '12px 13px', background: 'transparent' }}>
|
|
|
<Popover
|
|
|
v-model:show={state.showPopoverOrchestra}
|
|
|
actions={state.actions}
|
|
@@ -213,9 +218,8 @@ export default defineComponent({
|
|
|
}}
|
|
|
</Popover>
|
|
|
</div> */}
|
|
|
- </div>
|
|
|
</div>
|
|
|
- </OSticky>
|
|
|
+ </div>
|
|
|
{showContact.value ? (
|
|
|
<PullRefresh v-model={refreshing.value} onRefresh={onRefresh}>
|
|
|
<List
|