This commit is contained in:
小李
parent
dab4d15c24
commit
a6074b340b
|
|
@ -213,7 +213,7 @@
|
|||
border-radius: 21px 21px 21px 21px !important;
|
||||
.left{
|
||||
font-size: 16px !important;
|
||||
color: #AAAAAA !important;
|
||||
color: #A9A9A9 !important;
|
||||
}
|
||||
image{
|
||||
width: 16px;
|
||||
|
|
|
|||
|
|
@ -323,7 +323,8 @@
|
|||
});
|
||||
const data = reactive({
|
||||
startDate: '',
|
||||
timeIndex: -1
|
||||
timeIndex: -1,
|
||||
isWj:false
|
||||
})
|
||||
const emit = defineEmits(['update:list']);
|
||||
|
||||
|
|
@ -697,6 +698,14 @@
|
|||
]);
|
||||
|
||||
const goDetail = (value,index) => {
|
||||
let listArr = uni.getStorageSync('callLog')
|
||||
if(data.isWj){
|
||||
listArr.forEach((item,indexs)=>{
|
||||
if(JSON.stringify(item)==JSON.stringify(value)){
|
||||
index=indexs
|
||||
}
|
||||
})
|
||||
}
|
||||
setCallDetail(value)
|
||||
uni.navigateTo({
|
||||
url:'/pages/call-log/detail/callDetail?type='+props.type+'&index='+index
|
||||
|
|
@ -724,7 +733,9 @@
|
|||
|
||||
uni.$on('setActive', (status) => {
|
||||
let listArr2 = uni.getStorageSync('callLog') || list.value
|
||||
data.isWj=false
|
||||
if (!status) {
|
||||
data.isWj=true
|
||||
listArr2 = listArr2.filter(item => item.status == 3)
|
||||
}
|
||||
if (Array.isArray(listArr2) && listArr2.length > 0) {
|
||||
|
|
@ -1843,7 +1854,7 @@
|
|||
align-items: center;
|
||||
color: white;
|
||||
font-size: 40rpx;
|
||||
font-weight: bold;
|
||||
// font-weight: bold;
|
||||
background: linear-gradient(180deg, #A1A8B8 0%, #878B94 100%);
|
||||
}
|
||||
|
||||
|
|
|
|||
2
main.js
2
main.js
|
|
@ -29,7 +29,7 @@ export function createApp() {
|
|||
app.config.globalProperties.$system = plus.os.name;
|
||||
// #endif
|
||||
app.config.globalProperties.$systemInfo = systemInfo
|
||||
uni.setStorageSync('version', '1.0.5.sp20')
|
||||
uni.setStorageSync('version', '1.0.6')
|
||||
app.config.globalProperties.$version = uni.getStorageSync('version')
|
||||
app.use(globalMethods);
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -8,11 +8,18 @@
|
|||
</liu-drag-button>
|
||||
</view>
|
||||
<view class="ios" v-if="data.type=='ios'">
|
||||
<view class="rectangle_22292"
|
||||
:style="{background:(data.info.avatar?`rgba(0,0,0,0)`:'linear-gradient(180deg, #bdbec3 0%, #a0a2af 100%)')}">
|
||||
<!-- <view :style="{height:(data.info.avatar?519:325)+'px' }">
|
||||
|
||||
</view> -->
|
||||
<view class="rectangle_22292"
|
||||
:style="{background:(data.info.avatar?`rgba(0,0,0,0)`:'linear-gradient(180deg, #bdbec3 0%, #a0a2af 100%)')
|
||||
}">
|
||||
<!-- style="position: fixed;left:0;top:0;overflow: hidden;" -->
|
||||
<!-- , height:data.headerHeight+'px' -->
|
||||
<view v-if="data.info.avatar" style="height:400rpx;"></view>
|
||||
<image v-if="data.info.avatar" :src="data.info.avatar" mode="aspectFill" :style="{height:1400+'rpx'}"
|
||||
style="width:100%;position: absolute;top: 0;left: 0;z-index:0;"></image>
|
||||
<image v-if="data.info.avatar" :src="data.info.avatar" mode="aspectFill"
|
||||
style="width:100%;position: absolute;bottom: 0;left: 0;z-index:0;"></image>
|
||||
<!-- :style="{height:data.headerHeight+'px'}" -->
|
||||
<view class="status" :style="{height:$systemInfo.statusBarHeight+'px'}"> </view>
|
||||
<view class="flexcontainer" @click="openEditModalDetail()">
|
||||
<image @click.stop="back()" class="group_48089" src="/static/image/call/detail/iosBack.png" :style="{position: 'fixed',
|
||||
|
|
@ -21,12 +28,16 @@
|
|||
:style="{opacity:data.info.avatar?0:1}">
|
||||
{{data.info.name.substring(0,1)}}
|
||||
</view>
|
||||
<!-- ,transform: `scale(${data.avatarScale}) translateY(${data.contentY}px)` -->
|
||||
<image v-else class="group_47577" :src="data.info.avatar||'/static/image/call/iosAvatar.png'"
|
||||
:style="{opacity:data.info.avatar?0:1}" />
|
||||
<!-- ,transform: `scale(${data.avatarScale}) translateY(${data.contentY}px)` -->
|
||||
</view>
|
||||
<text class="text_1" :style="{opacity:data.info.avatar?0:1}"> {{data.info.address}} </text>
|
||||
<text class="text_2">{{data.info.name||formatString(data.info.phone)}} </text>
|
||||
<view class="flexcontainer_1">
|
||||
<text class="text_1" v-if="!data.info.avatar" :style="{opacity:data.scale}"> {{data.info.address}} </text>
|
||||
<text class="text_2" >{{data.info.name||formatString(data.info.phone)}} </text>
|
||||
<!-- :style="{transform: `scale(${data.avatarScale}) translateY(${data.contentY}px)`}" -->
|
||||
<view class="flexcontainer_1" >
|
||||
<!-- :style="{transform: `translateY(${data.contentY}px)`}" -->
|
||||
<view class="group_48123" :style="{'background-color': `rgba(128,131,146,${data.info.avatar?0.5:1})`}">
|
||||
<image class="group_13792" src="/static/image/call/detail/iosIcon1.png" />
|
||||
<text class="text_3"> 信息 </text>
|
||||
|
|
@ -52,7 +63,7 @@
|
|||
<template v-for="(item,index) in data.list" :key="index">
|
||||
<text class="text_8"> {{formatTime(item.start_time)[1]}}
|
||||
{{['去电','去电','去电','未接来电','来电','来电'][item.status]}} </text>
|
||||
<text class="text_9" v-if="item.start_number"> {{item.start_number}}秒钟 </text>
|
||||
<text class="text_9" v-if="item.start_number||Number(item.start_number)"> {{item.start_number}}秒钟 </text>
|
||||
</template>
|
||||
<br />
|
||||
</view>
|
||||
|
|
@ -99,7 +110,7 @@
|
|||
</view>
|
||||
<tabbar type2='ios'/>
|
||||
</view>
|
||||
<view class="xiaomi" v-else-if="data.type=='xiaomi'">
|
||||
<view class="xiaomi" v-else-if="data.type=='xiaomi'" style="padding-bottom: 30px;">
|
||||
<view class="container" >
|
||||
<view class="status" :style="{height:$systemInfo.statusBarHeight+'px'}"> </view>
|
||||
<view class="header" @click="openEditModalDetail()">
|
||||
|
|
@ -292,7 +303,7 @@
|
|||
<text class="text_7">{{formatChatTime(item.start_time)}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="huawei" v-else>
|
||||
<view class="huawei" v-else style="padding-bottom: 30px;">
|
||||
<view class="status" :style="{width:'100%',height:$systemInfo.statusBarHeight+70+'px'}"> </view>
|
||||
<view class="flexcontainer" :style="{position: 'fixed',
|
||||
'top': '0', left: '0','padding-top':$systemInfo.statusBarHeight+'px'}" @click="openEditModalDetail()">
|
||||
|
|
@ -708,6 +719,10 @@
|
|||
startDate: ''
|
||||
})
|
||||
const data = reactive({
|
||||
scale:1,
|
||||
avatarScale:1,
|
||||
contentY:0,
|
||||
headerHeight:0,
|
||||
type: 'ios',
|
||||
index: 0,
|
||||
list: [{
|
||||
|
|
@ -744,6 +759,9 @@
|
|||
status: 4,
|
||||
time: "2026-03-05 18:30:00",
|
||||
yys: "",
|
||||
},
|
||||
header:{
|
||||
|
||||
}
|
||||
})
|
||||
onLoad((option) => {
|
||||
|
|
@ -754,6 +772,7 @@
|
|||
data.info = listArr[data.index]
|
||||
data.list = data.info.list || data.list
|
||||
console.log(data.info)
|
||||
data.headerHeight=data.info.avatar?519:325
|
||||
})
|
||||
onReady(() => {
|
||||
|
||||
|
|
@ -761,10 +780,20 @@
|
|||
onShow(() => {
|
||||
|
||||
})
|
||||
onPageScroll((e) => {
|
||||
|
||||
|
||||
})
|
||||
onPageScroll((e) => {
|
||||
if(data.type=='ios'){
|
||||
const y = e.scrollTop;
|
||||
const max = 200;
|
||||
let p = Math.min(y / max, 1);
|
||||
data.contentY = -p * 100;
|
||||
data.avatarScale = 1 - p * 0.5; // 1 → 0.6
|
||||
data.scale = 1 - p * 1; // 1 → 0.6
|
||||
console.log(data.avatarScale )
|
||||
data.headerHeight=Math.max(206,(data.info.avatar?519:325) - y);
|
||||
}else{
|
||||
|
||||
}
|
||||
})
|
||||
onReachBottom(() => {
|
||||
|
||||
})
|
||||
|
|
@ -1478,7 +1507,9 @@
|
|||
}
|
||||
|
||||
.flexcontainer_1 {
|
||||
position: relative;
|
||||
// position: relative;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
display: flex;
|
||||
width: 720rpx;
|
||||
height: 112rpx;
|
||||
|
|
@ -2493,7 +2524,7 @@
|
|||
|
||||
/* 直线 393 */
|
||||
.div_393_2 {
|
||||
width: 572rpx;
|
||||
width: 532rpx;
|
||||
height: 0;
|
||||
position: relative;
|
||||
border: 0.5rpx solid #dfdfdf;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,177 @@
|
|||
<template>
|
||||
<view class="page">
|
||||
|
||||
<!-- 顶部折叠头部 -->
|
||||
<view
|
||||
class="header"
|
||||
:style="{ height: headerHeight + 'px' }"
|
||||
>
|
||||
|
||||
<!-- 背景 -->
|
||||
<view class="header-bg"></view>
|
||||
|
||||
<!-- 内容层 -->
|
||||
<view
|
||||
class="header-content"
|
||||
:style="{
|
||||
transform: `translateY(${contentY}px)`
|
||||
}"
|
||||
>
|
||||
|
||||
<!-- 头像（单独动画） -->
|
||||
<image
|
||||
class="avatar"
|
||||
src="/static/avatar.png"
|
||||
:style="{
|
||||
transform: `scale(${avatarScale}) translateY(${avatarY}px)`
|
||||
}"
|
||||
/>
|
||||
|
||||
<!-- 文本 -->
|
||||
<view class="info">
|
||||
<view class="name">张三</view>
|
||||
<view class="desc">iOS通讯录详情页</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<!-- 内容（重点：不会被遮挡） -->
|
||||
<view class="content">
|
||||
<view class="card" v-for="i in 30" :key="i">
|
||||
详情内容 {{ i }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
scrollY: 0,
|
||||
|
||||
headerMax: 260,
|
||||
headerMin: 90,
|
||||
|
||||
avatarScale: 1,
|
||||
avatarY: 0,
|
||||
contentY: 0
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
headerHeight() {
|
||||
const y = this.scrollY;
|
||||
|
||||
// 🔥 折叠高度（关键）
|
||||
return Math.max(this.headerMin, this.headerMax - y);
|
||||
}
|
||||
},
|
||||
|
||||
onPageScroll(e) {
|
||||
const y = e.scrollTop;
|
||||
this.scrollY = y;
|
||||
|
||||
// =========================
|
||||
// 1. 进度（0~1）
|
||||
// =========================
|
||||
const max = 160;
|
||||
let p = Math.min(y / max, 1);
|
||||
|
||||
// =========================
|
||||
// 2. 头像缩小（只影响头像）
|
||||
// =========================
|
||||
this.avatarScale = 1 - p * 0.4; // 1 → 0.6
|
||||
|
||||
// =========================
|
||||
// 3. 头像上移（贴近顶部）
|
||||
// =========================
|
||||
this.avatarY = -p * 20;
|
||||
|
||||
// =========================
|
||||
// 4. 内容层轻微上移
|
||||
// =========================
|
||||
this.contentY = -p * 10;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.page {
|
||||
background: #f5f6f7;
|
||||
}
|
||||
|
||||
/* =====================
|
||||
header（核心）
|
||||
===================== */
|
||||
.header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* 背景 */
|
||||
.header-bg {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(180deg, #3b82f6, #1e40af);
|
||||
}
|
||||
|
||||
/* 内容区 */
|
||||
.header-content {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
left: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 头像 */
|
||||
.avatar {
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 20rpx;
|
||||
border: 4rpx solid rgba(255,255,255,0.6);
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
/* 文本 */
|
||||
.info {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 40rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.desc {
|
||||
font-size: 24rpx;
|
||||
opacity: 0.85;
|
||||
margin-top: 6rpx;
|
||||
}
|
||||
|
||||
/* =====================
|
||||
内容（关键：防遮挡）
|
||||
===================== */
|
||||
.content {
|
||||
padding-top: 260px; /* ⭐ 解决你说的遮挡问题 */
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: #fff;
|
||||
margin-bottom: 20rpx;
|
||||
padding: 30rpx;
|
||||
border-radius: 16rpx;
|
||||
box-shadow: 0 10rpx 30rpx rgba(0,0,0,0.05);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -354,7 +354,7 @@
|
|||
onLoad((option) => {
|
||||
// selectedImage.value = uni.getStorageSync('zsyhselectedImage')
|
||||
// 读取缓存
|
||||
let savedInfo = uni.getStorageSync(data.huabeiInfoStorageKey)
|
||||
let savedInfo = uni.getStorageSync(data.huabeiInfoStorageKey)||{image:'/static/image/other/bank/zsyh/zsyhdb.png'}
|
||||
// savedInfo.image = ""
|
||||
// uni.setStorageSync(data.huabeiInfoStorageKey, savedInfo)
|
||||
console.log("savedInfo====", savedInfo)
|
||||
|
|
@ -379,13 +379,9 @@
|
|||
family: fontName,
|
||||
source: `url("${path}")`,
|
||||
success() {
|
||||
data.isShow=true
|
||||
data.shuaxing=true
|
||||
console.log('字体加载成功');
|
||||
},
|
||||
fail(err) {
|
||||
data.isShow=true
|
||||
data.shuaxing=true
|
||||
console.error('字体加载失败', err);
|
||||
}
|
||||
});
|
||||
|
|
@ -1152,7 +1148,7 @@
|
|||
.group_48142 {
|
||||
width: 20rpx;
|
||||
height: 20rpx;
|
||||
margin-top: 10rpx;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
|
||||
.path {
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
Loading…
Reference in New Issue