This commit is contained in:
小李
parent
9210162f17
commit
d72a0da52c
|
|
@ -8,16 +8,21 @@
|
|||
</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%)')}">
|
||||
<image :src="data.info.avatar" mode="aspectFill" :style="{height:$systemInfo.statusBarHeight*2+ 600+'rpx'}" style="width:100%;position: absolute;top: 0;left: 0;z-index:0;"></image>
|
||||
<view class="rectangle_22292"
|
||||
:style="{background:(data.info.avatar?`rgba(0,0,0,0)`:'linear-gradient(180deg, #bdbec3 0%, #a0a2af 100%)')}">
|
||||
<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>
|
||||
<view class="status" :style="{height:$systemInfo.statusBarHeight+'px'}"> </view>
|
||||
<view class="flexcontainer" >
|
||||
<image @click="back()" class="group_48089" src="/static/image/call/detail/iosBack.png" :style="{position: 'fixed',
|
||||
<view class="flexcontainer" @click="openEditModalDetail()">
|
||||
<image @click.stop="back()" class="group_48089" src="/static/image/call/detail/iosBack.png" :style="{position: 'fixed',
|
||||
'top': $systemInfo.statusBarHeight*2+22+'rpx', left: '26rpx'}" />
|
||||
<view class="text-avatar" v-if="data.info.name && data.info.avatarType === 'text'" :style="{opacity:data.info.avatar?0:1}">
|
||||
<view class="text-avatar" v-if="data.info.name && data.info.avatarType === 'text'"
|
||||
:style="{opacity:data.info.avatar?0:1}">
|
||||
{{data.info.name.substring(0,1)}}
|
||||
</view>
|
||||
<image v-else class="group_47577" :src="data.info.avatar||'/static/image/call/iosAvatar.png'" :style="{opacity:data.info.avatar?0:1}"/>
|
||||
<image v-else class="group_47577" :src="data.info.avatar||'/static/image/call/iosAvatar.png'"
|
||||
:style="{opacity:data.info.avatar?0:1}" />
|
||||
</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>
|
||||
|
|
@ -44,9 +49,10 @@
|
|||
<view class="group_48128" @click="openEditModal()">
|
||||
<view class="group_48127">
|
||||
<text class="text_7"> {{formatTime(data.list[0].start_time)[0]}} </text>
|
||||
<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" > {{item.start_number}}秒钟 </text>
|
||||
<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"> {{item.start_number}}秒钟 </text>
|
||||
</template>
|
||||
<br />
|
||||
</view>
|
||||
|
|
@ -58,7 +64,7 @@
|
|||
<image v-else class="group_475772" :src="data.info.avatar||'/static/image/call/iosAvatar.png'" />
|
||||
<text class="dec">联系人照片与海报</text>
|
||||
</view>
|
||||
<view class="infoBox2" v-if="data.info.name">
|
||||
<view class="infoBox2" v-if="data.info.name">
|
||||
<view class="title">
|
||||
手机
|
||||
</view>
|
||||
|
|
@ -66,7 +72,7 @@
|
|||
{{formatString(data.info.phone)}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="infoBox2" v-if="data.info.name&&data.info.notes">
|
||||
<view class="infoBox2" v-if="data.info.name&&data.info.notes">
|
||||
<view class="title">
|
||||
备注
|
||||
</view>
|
||||
|
|
@ -87,14 +93,17 @@
|
|||
<view class="group_48129">
|
||||
<text class="text_14"> 屏蔽来电号码 </text>
|
||||
</view>
|
||||
</view>
|
||||
<view style="height: 100rpx;">
|
||||
|
||||
</view>
|
||||
<tabbar />
|
||||
</view>
|
||||
<view class="xiaomi" v-else-if="data.type=='xiaomi'">
|
||||
<view class="container">
|
||||
<view class="container" >
|
||||
<view class="status" :style="{height:$systemInfo.statusBarHeight+'px'}"> </view>
|
||||
<view class="header">
|
||||
<image @click="back()" class="back-icon" src="/static/image/call/detail/xiaomiBack.png" :style="{position: 'fixed',
|
||||
<view class="header" @click="openEditModalDetail()">
|
||||
<image @click.stop="back()" class="back-icon" src="/static/image/call/detail/xiaomiBack.png" :style="{position: 'fixed',
|
||||
'top': $systemInfo.statusBarHeight*2+20+'rpx', left: '26rpx'}" />
|
||||
</view>
|
||||
<view class="avatar">
|
||||
|
|
@ -150,10 +159,10 @@
|
|||
<view class="status" :style="{height:$systemInfo.statusBarHeight+'px'}"> </view>
|
||||
<view class="rectangle_22291">
|
||||
<!-- 顶部 -->
|
||||
<view class="group_45764">
|
||||
<view class="group_45764" @click="openEditModalDetail()">
|
||||
<view class="flexcontainer">
|
||||
<view class="group_8">
|
||||
<image class="group_13815" @click="back()" src="/static/image/call/detail/oppoBack.png" :style="{position: 'fixed',
|
||||
<image class="group_13815" @click.stop="back()" src="/static/image/call/detail/oppoBack.png" :style="{position: 'fixed',
|
||||
'top': $systemInfo.statusBarHeight*2+20+'rpx', left: '26rpx'}" />
|
||||
</view>
|
||||
<view class="group_7"></view>
|
||||
|
|
@ -249,8 +258,8 @@
|
|||
</view>
|
||||
<view class="vivo" v-else-if="data.type=='vivo'">
|
||||
<view class="status" :style="{height:$systemInfo.statusBarHeight+'px'}"> </view>
|
||||
<view class="group_8">
|
||||
<image class="group_13815" @click="back()" src="/static/image/call/detail/vivoBack.png" :style="{position: 'fixed',
|
||||
<view class="group_8" @click="openEditModalDetail()">
|
||||
<image class="group_13815" @click.stop="back()" src="/static/image/call/detail/vivoBack.png" :style="{position: 'fixed',
|
||||
'top': $systemInfo.statusBarHeight*2+20+'rpx', left: '44rpx'}" />
|
||||
</view>
|
||||
<view class="div_397"></view>
|
||||
|
|
@ -286,8 +295,8 @@
|
|||
<view class="huawei" v-else>
|
||||
<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'}">
|
||||
<image class="group_47675" mode="aspectFill" @click="back()" src="/static/image/call/detail/huaweiBack.png" />
|
||||
'top': '0', left: '0','padding-top':$systemInfo.statusBarHeight+'px'}" @click="openEditModalDetail()">
|
||||
<image class="group_47675" mode="aspectFill" @click.stop="back()" src="/static/image/call/detail/huaweiBack.png" />
|
||||
<view class="flexcontainer_1">
|
||||
<image class="group_47667" mode="aspectFill" src="/static/image/call/detail/huaweiIcon1.png" />
|
||||
<image class="group_47619" mode="aspectFill" src="/static/image/call/detail/huaweiIcon2.png" />
|
||||
|
|
@ -404,6 +413,162 @@
|
|||
<DateTimePicker :defaultDate="currentTimeValue" :mode="4" @onChange="onTimeChange" />
|
||||
</view>
|
||||
</uni-popup>
|
||||
|
||||
<!-- 编辑弹窗 -->
|
||||
<view class="modal-mask" v-if="showEditModal">
|
||||
<view class="modal-content" @click.stop>
|
||||
<view class="modal-header">
|
||||
<text class="modal-title">编辑通话记录</text>
|
||||
</view>
|
||||
<view class="modal-body">
|
||||
<view class="form-item">
|
||||
<text class="form-label">姓名</text>
|
||||
<input class="form-input" v-model="editForm.name" placeholder="请输入姓名" />
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<text class="form-label">电话</text>
|
||||
<input class="form-input" v-model="editForm.phone" placeholder="请输入电话" />
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<text class="form-label">备注</text>
|
||||
<input class="form-input" v-model="editForm.notes" placeholder="请输入备注（骚扰电话）" />
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<text class="form-label">运营商</text>
|
||||
<uni-data-select class="form-select" v-model="editForm.yys" :localdata="yysOptions" @change="onYysChange"
|
||||
:clear="false"></uni-data-select>
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<text class="form-label">地址</text>
|
||||
<input class="form-input" v-model="editForm.address" placeholder="请输入地址" />
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<text class="form-label">时间</text>
|
||||
<view class="form-input form-input-time" @click="setTimeType">
|
||||
{{ editForm.time }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<text class="form-label">卡几</text>
|
||||
<uni-data-select class="form-select" v-model="editForm.kj" :localdata="kjOptions" @change="onKjChange"
|
||||
:clear="false"></uni-data-select>
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<text class="form-label">状态</text>
|
||||
<uni-data-select class="form-select" v-model="editForm.status" :localdata="editStatusOptions"
|
||||
@change="onStatusChange" :clear="false"></uni-data-select>
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<text class="form-label">电话备注</text>
|
||||
<input class="form-input" v-model="editForm.phoneNotes" placeholder="请输入电话备注" />
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<text class="form-label">头像类型</text>
|
||||
<uni-data-select class="form-select" v-model="editForm.avatarType" :localdata="avatarTypeOptions"
|
||||
@change="onAvatarTypeChange" :clear="false"></uni-data-select>
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<text class="form-label">头像</text>
|
||||
<view class="form-avatar-container">
|
||||
<view v-if="editForm.avatarType === 'image'" class="form-avatar" @click="choose()">
|
||||
<image :src="editForm.avatar||'/static/image/call/iosAvatar.png'" mode=""></image>
|
||||
</view>
|
||||
<view v-else-if="editForm.avatarType === 'text'" class="form-text-avatar">
|
||||
{{ editForm.name ? getAvatarText(editForm.name) : '请输入姓名' }}
|
||||
</view>
|
||||
<view v-if="editForm.avatar" class="avatar-clear" @click="clearAvatar">清除</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="modal-footer">
|
||||
<view class="btn btn-cancel" @click="closeEditModal">取消</view>
|
||||
<view class="btn btn-confirm" @click="saveEdit">保存</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<uni-popup ref="editTimePopup" type="bottom">
|
||||
<view class="timeBox">
|
||||
<view class="titleBox">
|
||||
<view class="title"></view>
|
||||
<view class="btns" @click="settmes">确定</view>
|
||||
</view>
|
||||
<DateTimePicker :defaultDate="editData.startDate" :mode="4" @onChange="onChangeStartDate" />
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
|
||||
<!-- 添加联系人弹窗 -->
|
||||
<view class="modal-mask" v-if="showAddModal">
|
||||
<view class="modal-content" @click.stop>
|
||||
<view class="modal-header">
|
||||
<text class="modal-title">添加联系人</text>
|
||||
</view>
|
||||
<view class="modal-body">
|
||||
<view class="form-item">
|
||||
<text class="form-label">姓名</text>
|
||||
<input class="form-input" v-model="addForm.name" placeholder="请输入姓名" />
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<text class="form-label">电话 <text>*</text></text>
|
||||
<input class="form-input" v-model="addForm.phone" placeholder="请输入电话" />
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<text class="form-label">运营商 <text>*</text></text>
|
||||
<uni-data-select class="form-select" v-model="addForm.yys" :localdata="yysOptions" @change="onAddYysChange"
|
||||
:clear="false"></uni-data-select>
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<text class="form-label">时间 <text>*</text></text>
|
||||
<view class="form-input form-input-time" @click="setAddTimeType">
|
||||
{{ addForm.time }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<text class="form-label">状态 <text>*</text></text>
|
||||
<uni-data-select class="form-select" v-model="addForm.status" :localdata="editStatusOptions"
|
||||
@change="onAddStatusChange" :clear="false"></uni-data-select>
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<text class="form-label">卡几</text>
|
||||
<uni-data-select class="form-select" v-model="addForm.kj" :localdata="kjOptions" @change="onAddKjChange"
|
||||
:clear="false"></uni-data-select>
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<text class="form-label">地址</text>
|
||||
<input class="form-input" v-model="addForm.address" placeholder="请输入地址" />
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<text class="form-label">备注</text>
|
||||
<input class="form-input" v-model="addForm.notes" placeholder="请输入备注" />
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<text class="form-label">电话备注</text>
|
||||
<input class="form-input" v-model="addForm.phoneNotes" placeholder="请输入电话备注" />
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<text class="form-label">头像类型</text>
|
||||
<uni-data-select class="form-select" v-model="addForm.avatarType" :localdata="avatarTypeOptions"
|
||||
@change="onAddAvatarTypeChange" :clear="false"></uni-data-select>
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<text class="form-label">头像</text>
|
||||
<view class="form-avatar-container">
|
||||
<view v-if="addForm.avatarType === 'image'" class="form-avatar" @click="choose()">
|
||||
<image :src="addForm.avatar||'/static/image/call/iosAvatar.png'" mode=""></image>
|
||||
</view>
|
||||
<view v-else-if="addForm.avatarType === 'text'" class="form-text-avatar">
|
||||
{{ addForm.name ? getAvatarText(addForm.name) : '请输入姓名' }}
|
||||
</view>
|
||||
<view v-if="addForm.avatar" class="avatar-clear" @click="clearAvatar">清除</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="modal-footer">
|
||||
<view class="btn btn-cancel" @click="closeAddModal">取消</view>
|
||||
<view class="btn btn-confirm" @click="saveAdd">保存</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script setup>
|
||||
|
|
@ -436,11 +601,112 @@
|
|||
} = useStore()
|
||||
let recordPopup = ref()
|
||||
let timePickerPopup = ref()
|
||||
let editTimePopup = ref()
|
||||
let statusOptions = ref(['播出-未接', '播出-已接', '播出-拒接', '来电-未接', '来电-已接', '来电-拒接']);
|
||||
const tempList = ref([])
|
||||
const currentTimeIndex = ref(0)
|
||||
const currentTimeType = ref(0)
|
||||
const currentTimeValue = ref('')
|
||||
|
||||
// 编辑弹窗相关
|
||||
const showEditModal = ref(false);
|
||||
const editForm = reactive({
|
||||
avatar: '',
|
||||
avatarType: 'image',
|
||||
name: '',
|
||||
phone: '',
|
||||
phoneNotes: '',
|
||||
yys: '',
|
||||
yysIndex: 0,
|
||||
kj: '1',
|
||||
address: '',
|
||||
time: '',
|
||||
status: 0,
|
||||
notes: ''
|
||||
});
|
||||
|
||||
// 添加联系人相关
|
||||
const showAddModal = ref(false);
|
||||
const addForm = reactive({
|
||||
avatar: '',
|
||||
avatarType: 'image',
|
||||
name: '',
|
||||
phone: '',
|
||||
phoneNotes: '',
|
||||
yys: '',
|
||||
kj: '1',
|
||||
address: '',
|
||||
time: '',
|
||||
status: 0,
|
||||
notes: ''
|
||||
});
|
||||
|
||||
// 编辑弹窗使用的选项
|
||||
const kjOptions = ref([{
|
||||
value: '1',
|
||||
text: '卡1'
|
||||
},
|
||||
{
|
||||
value: '2',
|
||||
text: '卡2'
|
||||
},
|
||||
]);
|
||||
const editStatusOptions = ref([{
|
||||
value: 0,
|
||||
text: '播出-未接'
|
||||
},
|
||||
{
|
||||
value: 1,
|
||||
text: '播出-已接'
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
text: '播出-拒接'
|
||||
},
|
||||
{
|
||||
value: 3,
|
||||
text: '来电-未接'
|
||||
},
|
||||
{
|
||||
value: 4,
|
||||
text: '来电-已接'
|
||||
},
|
||||
{
|
||||
value: 5,
|
||||
text: '来电-拒接'
|
||||
}
|
||||
]);
|
||||
const yysOptions = ref([{
|
||||
value: '移动',
|
||||
text: '移动'
|
||||
},
|
||||
{
|
||||
value: '联通',
|
||||
text: '联通'
|
||||
},
|
||||
{
|
||||
value: '电信',
|
||||
text: '电信'
|
||||
},
|
||||
{
|
||||
value: '广电',
|
||||
text: '广电'
|
||||
}
|
||||
]);
|
||||
const avatarTypeOptions = ref([{
|
||||
value: 'image',
|
||||
text: '图片'
|
||||
},
|
||||
{
|
||||
value: 'text',
|
||||
text: '文字'
|
||||
}
|
||||
]);
|
||||
|
||||
// 编辑时间选择数据
|
||||
const editData = reactive({
|
||||
startDate: ''
|
||||
})
|
||||
const data = reactive({
|
||||
type: 'ios',
|
||||
index: 0,
|
||||
|
|
@ -572,6 +838,260 @@
|
|||
const back = () => {
|
||||
uni.navigateBack()
|
||||
}
|
||||
|
||||
// ============ 编辑弹窗方法 ============
|
||||
// 打开编辑弹窗
|
||||
const openEditModalDetail = () => {
|
||||
editForm.avatar = data.info.avatar || '';
|
||||
editForm.avatarType = data.info.avatarType || 'image';
|
||||
editForm.name = data.info.name || '';
|
||||
editForm.phone = data.info.phone || '';
|
||||
editForm.phoneNotes = data.info.phoneNotes || '';
|
||||
editForm.yys = data.info.yys || '';
|
||||
editForm.yysIndex = yysOptions.value.findIndex(item => item.value === (data.info.yys || '移动'));
|
||||
editForm.kj = data.info.kj || '1';
|
||||
editForm.address = data.info.address || '';
|
||||
editForm.time = data.info.time || '';
|
||||
editForm.status = data.info.status || 0;
|
||||
editForm.notes = data.info.notes || '';
|
||||
showEditModal.value = true;
|
||||
};
|
||||
|
||||
// 设置编辑时间
|
||||
function setTimeType() {
|
||||
editData.startDate = editForm.time
|
||||
editTimePopup.value.open()
|
||||
}
|
||||
|
||||
// 编辑时间变化
|
||||
function onChangeStartDate(date) {
|
||||
editData.startDate = date
|
||||
}
|
||||
|
||||
// 确认编辑时间
|
||||
function settmes() {
|
||||
editTimePopup.value.close()
|
||||
if (showEditModal.value) {
|
||||
editForm.time = editData.startDate
|
||||
} else if (showAddModal.value) {
|
||||
addForm.time = editData.startDate
|
||||
}
|
||||
}
|
||||
|
||||
// 运营商选择变化
|
||||
const onYysChange = (e) => {
|
||||
const index = e.detail.value;
|
||||
editForm.yys = yysOptions.value[index].value;
|
||||
};
|
||||
|
||||
// 关闭编辑弹窗
|
||||
const closeEditModal = () => {
|
||||
showEditModal.value = false;
|
||||
};
|
||||
|
||||
// 状态选择变化
|
||||
const onStatusChange = (e) => {
|
||||
const index = e.detail.value;
|
||||
editForm.status = editStatusOptions.value[index].value;
|
||||
};
|
||||
|
||||
// 卡几选择变化
|
||||
const onKjChange = (e) => {
|
||||
const index = e.detail.value;
|
||||
editForm.kj = kjOptions.value[index].value;
|
||||
};
|
||||
|
||||
// 头像类型选择变化
|
||||
const onAvatarTypeChange = (e) => {
|
||||
editForm.avatarType = e.detail.value;
|
||||
};
|
||||
|
||||
// 保存编辑
|
||||
const saveEdit = () => {
|
||||
if (!editForm.name && !editForm.phone) {
|
||||
uni.showToast({
|
||||
title: '请填写姓名或电话',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
data.info.avatar = editForm.avatar;
|
||||
data.info.avatarType = editForm.avatarType;
|
||||
data.info.name = editForm.name;
|
||||
data.info.phone = editForm.phone;
|
||||
data.info.phoneNotes = editForm.phoneNotes;
|
||||
data.info.yys = editForm.yys;
|
||||
data.info.kj = editForm.kj;
|
||||
data.info.address = editForm.address;
|
||||
data.info.time = editForm.time;
|
||||
data.info.status = editForm.status;
|
||||
data.info.notes = editForm.notes;
|
||||
|
||||
let listArr = uni.getStorageSync('callLog')
|
||||
listArr[data.index] = data.info
|
||||
uni.setStorageSync('callLog', listArr)
|
||||
|
||||
closeEditModal();
|
||||
uni.showToast({
|
||||
title: '保存成功',
|
||||
icon: 'success'
|
||||
});
|
||||
};
|
||||
|
||||
// ============ 添加联系人方法 ============
|
||||
// 打开添加弹窗
|
||||
const openAddModal = () => {
|
||||
const now = new Date();
|
||||
const currentYear = now.getFullYear();
|
||||
const currentMonth = now.getMonth();
|
||||
const currentDay = now.getDate();
|
||||
|
||||
addForm.avatar = '';
|
||||
addForm.avatarType = 'image';
|
||||
addForm.name = '';
|
||||
addForm.phone = '';
|
||||
addForm.phoneNotes = '电话';
|
||||
addForm.yys = '';
|
||||
addForm.kj = '1';
|
||||
addForm.address = '';
|
||||
addForm.time =
|
||||
`${currentYear}-${currentMonth + 1}-${currentDay} ${now.getHours()}:${now.getMinutes()}:${now.getSeconds()}`;
|
||||
addForm.status = 0;
|
||||
addForm.notes = '';
|
||||
showAddModal.value = true;
|
||||
};
|
||||
|
||||
// 关闭添加弹窗
|
||||
const closeAddModal = () => {
|
||||
showAddModal.value = false;
|
||||
};
|
||||
|
||||
// 设置添加时间
|
||||
function setAddTimeType() {
|
||||
editData.startDate = addForm.time
|
||||
editTimePopup.value.open()
|
||||
}
|
||||
|
||||
// 添加时运营商选择变化
|
||||
const onAddYysChange = (e) => {
|
||||
const index = e.detail.value;
|
||||
addForm.yys = yysOptions.value[index].value;
|
||||
};
|
||||
|
||||
// 添加时状态选择变化
|
||||
const onAddStatusChange = (e) => {
|
||||
const index = e.detail.value;
|
||||
addForm.status = editStatusOptions.value[index].value;
|
||||
};
|
||||
|
||||
// 添加时卡几选择变化
|
||||
const onAddKjChange = (e) => {
|
||||
const index = e.detail.value;
|
||||
addForm.kj = kjOptions.value[index].value;
|
||||
};
|
||||
|
||||
// 添加时头像类型选择变化
|
||||
const onAddAvatarTypeChange = (e) => {
|
||||
addForm.avatarType = e.detail.value;
|
||||
};
|
||||
|
||||
// 保存添加
|
||||
const saveAdd = () => {
|
||||
if (!addForm.phone) {
|
||||
uni.showToast({
|
||||
title: '请输入电话',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (!addForm.yys) {
|
||||
uni.showToast({
|
||||
title: '请选择运营商',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (!addForm.time) {
|
||||
uni.showToast({
|
||||
title: '请输入时间',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const newItem = {
|
||||
avatar: addForm.avatar || '',
|
||||
avatarType: addForm.avatarType || 'image',
|
||||
title: addForm.name || addForm.phone,
|
||||
name: addForm.name || '',
|
||||
phone: addForm.phone,
|
||||
phoneNotes: addForm.phoneNotes || '电话',
|
||||
yys: addForm.yys,
|
||||
kj: addForm.kj,
|
||||
address: addForm.address || '',
|
||||
time: addForm.time,
|
||||
status: addForm.status,
|
||||
notes: addForm.notes || '',
|
||||
list: []
|
||||
};
|
||||
|
||||
let listArr = uni.getStorageSync('callLog') || []
|
||||
listArr.unshift(newItem)
|
||||
uni.setStorageSync('callLog', listArr)
|
||||
|
||||
closeAddModal();
|
||||
uni.showToast({
|
||||
title: '添加成功',
|
||||
icon: 'success'
|
||||
});
|
||||
};
|
||||
|
||||
// ============ 头像相关方法 ============
|
||||
// 获取头像文字
|
||||
const getAvatarText = (name) => {
|
||||
if (!name) return '';
|
||||
return name.charAt(0);
|
||||
};
|
||||
|
||||
// 选择头像
|
||||
const choose = () => {
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
sizeType: ['compressed'],
|
||||
sourceType: ['album', 'camera'],
|
||||
success: function(res) {
|
||||
const tempFilePath = res.tempFilePaths[0];
|
||||
uni.saveFile({
|
||||
tempFilePath: tempFilePath,
|
||||
success: function(ress) {
|
||||
const localPath = ress.savedFilePath;
|
||||
if (showEditModal.value) {
|
||||
editForm.avatar = localPath;
|
||||
} else if (showAddModal.value) {
|
||||
addForm.avatar = localPath;
|
||||
}
|
||||
},
|
||||
fail: function(err) {
|
||||
if (showEditModal.value) {
|
||||
editForm.avatar = tempFilePath;
|
||||
} else if (showAddModal.value) {
|
||||
addForm.avatar = tempFilePath;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 清除头像
|
||||
const clearAvatar = () => {
|
||||
if (showEditModal.value) {
|
||||
editForm.avatar = '';
|
||||
} else if (showAddModal.value) {
|
||||
addForm.avatar = '';
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 计算两个时间间隔
|
||||
* @param {String|Date|Number} startTime 开始时间
|
||||
|
|
@ -892,6 +1412,7 @@
|
|||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
overflow: hidden;
|
||||
|
||||
.flexcontainer {
|
||||
position: relative;
|
||||
display: flex;
|
||||
|
|
@ -1119,47 +1640,54 @@
|
|||
isolation: isolate;
|
||||
z-index: 0;
|
||||
margin-top: 0;
|
||||
.infoBox2{
|
||||
|
||||
.infoBox2 {
|
||||
width: 720rpx;
|
||||
margin-top: 32rpx;
|
||||
margin-left: 16rpx;
|
||||
margin-left: 16rpx;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 16rpx;
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
padding:20rpx 30rpx;
|
||||
.title{
|
||||
padding: 20rpx 30rpx;
|
||||
|
||||
.title {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
.dec{
|
||||
|
||||
.dec {
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #007AD8;
|
||||
}
|
||||
.dec2{
|
||||
|
||||
.dec2 {
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
}
|
||||
.infoBox{
|
||||
|
||||
.infoBox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 720rpx;
|
||||
margin-top: 32rpx;
|
||||
margin-left: 16rpx;
|
||||
margin-left: 16rpx;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 16rpx;
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
padding:20rpx 30rpx;
|
||||
.group_475772{
|
||||
padding: 20rpx 30rpx;
|
||||
|
||||
.group_475772 {
|
||||
width: 76rpx;
|
||||
height: 76rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.text-avatar2 {
|
||||
width: 76rpx;
|
||||
height: 76rpx;
|
||||
|
|
@ -1172,13 +1700,15 @@
|
|||
font-weight: bold;
|
||||
background: linear-gradient(180deg, #A1A8B8 0%, #878B94 100%);
|
||||
}
|
||||
.dec{
|
||||
|
||||
.dec {
|
||||
margin-left: 16rpx;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
}
|
||||
|
||||
.group_48128 {
|
||||
position: relative;
|
||||
width: 720rpx;
|
||||
|
|
@ -1402,7 +1932,7 @@
|
|||
|
||||
.header {
|
||||
width: 100%;
|
||||
|
||||
height: 80rpx;
|
||||
.back-icon {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
|
|
@ -1420,6 +1950,7 @@
|
|||
image {
|
||||
width: 208rpx;
|
||||
height: 208rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1666,6 +2197,7 @@
|
|||
height: 180rpx;
|
||||
border-radius: 50%;
|
||||
margin-top: 16rpx;
|
||||
|
||||
}
|
||||
|
||||
.text_1 {
|
||||
|
|
@ -2283,6 +2815,7 @@
|
|||
width: 188rpx;
|
||||
height: 188rpx;
|
||||
margin: 84rpx auto 0;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.text_1 {
|
||||
|
|
@ -2467,9 +3000,12 @@
|
|||
width: 232rpx;
|
||||
height: 232rpx;
|
||||
|
||||
border-radius: 50%;
|
||||
|
||||
image {
|
||||
width: 232rpx;
|
||||
height: 232rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
margin-left: 260rpx;
|
||||
|
|
@ -2794,4 +3330,164 @@
|
|||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* 编辑弹窗样式 */
|
||||
.modal-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
width: 600rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
padding: 40rpx;
|
||||
text-align: center;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 40rpx;
|
||||
height: calc(80vh - 260rpx);
|
||||
overflow-x: scroll;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
margin-bottom: 30rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
display: block;
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
margin-bottom: 16rpx;
|
||||
|
||||
text {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
|
||||
.form-input {
|
||||
width: 364rpx;
|
||||
height: 80rpx;
|
||||
border: 1rpx solid #ddd;
|
||||
border-radius: 8rpx;
|
||||
padding: 0 20rpx;
|
||||
font-size: 28rpx;
|
||||
box-sizing: border-box;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.form-select {
|
||||
width: 364rpx !important;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.form-avatar-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.form-avatar {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border: 1px dashed #666;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.form-text-avatar {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: white;
|
||||
font-size: 40rpx;
|
||||
font-weight: bold;
|
||||
background: linear-gradient(180deg, #A1A8B8 0%, #878B94 100%);
|
||||
border: 1px dashed #666;
|
||||
}
|
||||
|
||||
.avatar-clear {
|
||||
margin-left: 20rpx;
|
||||
color: #007AFF;
|
||||
font-size: 28rpx;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.form-input-time {
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
display: flex;
|
||||
border-top: 1rpx solid #f0f0f0;
|
||||
height: 120rpx;
|
||||
}
|
||||
|
||||
.btn {
|
||||
flex: 1;
|
||||
height: 100rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 32rpx;
|
||||
background: #F1F1F1;
|
||||
margin: 10rpx;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.btn-cancel {
|
||||
border-right: 1rpx solid #f0f0f0;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.btn-confirm {
|
||||
color: #fff;
|
||||
background: #007AFF;
|
||||
}
|
||||
|
||||
/* 编辑时间选择弹窗样式 */
|
||||
.timeBox {
|
||||
background-color: #fff;
|
||||
|
||||
.titleBox {
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
.btns {
|
||||
font-size: 12px;
|
||||
color: #007AFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
<uni-icons type="right" size="16"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
<view class="line" :style="{ background: item.color.lineColor }"></view>
|
||||
<!-- <view class="line" :style="{ background: item.color.lineColor }"></view> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
|
|||
|
|
@ -28,20 +28,20 @@
|
|||
</view>
|
||||
<view class="flexcontainer_5">
|
||||
<view class="flexcontainer_6">
|
||||
<view class="flexcontainer_7">
|
||||
<view class="flexcontainer_7" @click="openEditDialog">
|
||||
<text class="text_7">¥ {{data.form.balance}}</text>
|
||||
<view class="group_48142">
|
||||
<image class="path" src="/static/image/other/bank/zsyh/icon1.png" mode="aspectFit" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="flexcontainer_8">
|
||||
<view class="group_48141">
|
||||
<view class="group_48141" @click="data.isShow=true">
|
||||
<text class="text_8">查看卡号</text>
|
||||
</view>
|
||||
<text class="text_9">**** {{data.form.cardNumber.substring(data.form.cardNumber.length-4)}}</text>
|
||||
<text class="text_9" @click="openEditDialog">**** {{data.form.cardNumber.substring(data.form.cardNumber.length-4)}}</text>
|
||||
</view>
|
||||
<text class="text_10">可用余额</text>
|
||||
<text class="text_11">{{data.form.cardType}}</text>
|
||||
<text class="text_11" @click="openEditDialog">{{data.form.cardType}}</text>
|
||||
</view>
|
||||
<image class="div_9c80ece453e55d5cd3bbdcc7d0255f31" src="/static/image/other/bank/zsyh/zsyhImg.png"
|
||||
mode="aspectFill" />
|
||||
|
|
@ -55,11 +55,11 @@
|
|||
</view>
|
||||
<view class="flexcontainer_2">
|
||||
<view>
|
||||
<text class="text_2">{{data.form.bankName}}</text>
|
||||
<text class="text_2" @click="openEditDialog">{{data.form.bankName}}</text>
|
||||
<image class="group_13981" src="/static/image/other/bank/zsyh/icon2.png" mode="aspectFit" />
|
||||
</view>
|
||||
<view>
|
||||
<text class="text_3">{{data.form.alias||'设置别名'}}</text>
|
||||
<text class="text_3" @click="openEditDialog">{{data.form.alias||'设置别名'}}</text>
|
||||
<image class="group_13982" src="/static/image/other/bank/zsyh/edit.png" mode="aspectFit" />
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -133,7 +133,9 @@
|
|||
<view class="title">
|
||||
银行卡管理
|
||||
</view>
|
||||
<image class="yhkgl" src="/static/image/other/bank/zsyh/yhkgl.png" mode="widthFix"></image>
|
||||
<view @touchstart="handleTouchStart" @touchend="handleTouchEnd">
|
||||
<image class="yhkgl" :src="selectedImage||'/static/image/other/bank/zsyh/yhkgl.png'" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="editDialog.show" class="editDialog">
|
||||
|
|
@ -147,6 +149,10 @@
|
|||
<text>余额</text>
|
||||
<input v-model.number="editDialog.data.balance" type="number" />
|
||||
</view>
|
||||
<view class="formItem">
|
||||
<text>户名</text>
|
||||
<input v-model="editDialog.data.name" />
|
||||
</view>
|
||||
<view class="formItem">
|
||||
<text>卡类型</text>
|
||||
<input v-model="editDialog.data.cardType" />
|
||||
|
|
@ -186,6 +192,27 @@
|
|||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="dask" v-if="data.isShow">
|
||||
<view class="info">
|
||||
<image @click="data.isShow=false" src="/static/image/common/close.png" mode=""></image>
|
||||
<view class="title">
|
||||
卡号信息
|
||||
</view>
|
||||
<view class="dec">
|
||||
户 名: {{data.form.name}}
|
||||
</view>
|
||||
<view class="dec">
|
||||
卡 号: {{addSpaceEveryFourChars(data.form.cardNumber)}}
|
||||
</view>
|
||||
<view class="dec">
|
||||
开户行: {{data.form.bankName}}
|
||||
</view>
|
||||
<view class="btnbox">
|
||||
<view class="btn">复制全部</view>
|
||||
<view class="btn btns">仅复制卡号</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
|
@ -219,10 +246,13 @@
|
|||
cardNumber: '8155386535158511555',
|
||||
bankName: '重庆上清寺支行',
|
||||
alias: '普通卡',
|
||||
name:'某某',
|
||||
chartData: {} // ✅ 30天数据 [{date,value}]
|
||||
}
|
||||
});
|
||||
let selectedImage=ref('')
|
||||
const data = reactive({
|
||||
isShow:false,
|
||||
month : new Date().getMonth() + 1,
|
||||
navbar: {
|
||||
title: "微信",
|
||||
|
|
@ -234,6 +264,7 @@
|
|||
cardNumber: '8155386535158511555',
|
||||
bankName: '重庆上清寺支行',
|
||||
alias: '普通卡',
|
||||
name:'某某',
|
||||
chartData: {} // ✅ 30天数据 [{date,value}]
|
||||
},
|
||||
//您可以通过修改 config-ucharts.js 文件中下标为 ['column'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
|
||||
|
|
@ -315,6 +346,7 @@
|
|||
cardNumber: '8155386535158511555',
|
||||
bankName: '重庆上清寺支行',
|
||||
alias: '普通卡',
|
||||
name:'某某',
|
||||
chartData: getDefaultChart()
|
||||
}
|
||||
saveCache(data.form)
|
||||
|
|
@ -371,6 +403,7 @@
|
|||
data.form.cardNumber = editDialog.data.cardNumber;
|
||||
data.form.bankName = editDialog.data.bankName;
|
||||
data.form.alias = editDialog.data.alias;
|
||||
data.form.name = editDialog.data.name;
|
||||
// ✅ 更新图表
|
||||
data.form.chartData = editDialog.data.chartData
|
||||
editDialog.show = false;
|
||||
|
|
@ -381,6 +414,47 @@
|
|||
editDialog.data = JSON.parse(JSON.stringify(data.form))
|
||||
editDialog.show = true
|
||||
}
|
||||
// 长按事件定时器
|
||||
let longPressTimer = null
|
||||
const handleTouchStart = (e) => {
|
||||
// 兼容iOS上滑HOME条，如果有底部安全区且触摸位置在底部安全区内，则不触发
|
||||
const systemInfo = uni.getSystemInfoSync()
|
||||
if (systemInfo.platform === 'ios' && systemInfo.safeAreaInsets?.bottom) {
|
||||
const clientY = e.touches[0].clientY
|
||||
const windowHeight = systemInfo.windowHeight
|
||||
// 如果触摸点在底部安全区范围内（通常是34px），则忽略
|
||||
if (clientY > windowHeight - systemInfo.safeAreaInsets.bottom) {
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
longPressTimer = setTimeout(() => {
|
||||
uni.vibrateShort()
|
||||
chooseImage()
|
||||
}, 1200) // 长按时间大于1s
|
||||
}
|
||||
|
||||
|
||||
const handleTouchEnd = () => {
|
||||
if (longPressTimer) {
|
||||
clearTimeout(longPressTimer)
|
||||
longPressTimer = null
|
||||
}
|
||||
}
|
||||
// 选择图片
|
||||
const chooseImage = () => {
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
sourceType: ['album'],
|
||||
success: (res) => {
|
||||
selectedImage.value = res.tempFilePaths[0]
|
||||
// data.showMask = true
|
||||
}
|
||||
})
|
||||
}
|
||||
function addSpaceEveryFourChars(str) {
|
||||
return str.replace(/(.{4})/g, '$1 ').trim();
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
@ -923,7 +997,7 @@
|
|||
margin-bottom: 10rpx;
|
||||
|
||||
.day {
|
||||
font-size: 22rpx;
|
||||
font-size: 32rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
|
|
@ -932,7 +1006,7 @@
|
|||
border: 1rpx solid #ddd;
|
||||
border-radius: 8rpx;
|
||||
padding: 4rpx 10rpx;
|
||||
font-size: 22rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1041,4 +1115,65 @@
|
|||
color: #fff;
|
||||
border: none;
|
||||
}
|
||||
.dask{
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
position: fixed;
|
||||
left:0;
|
||||
top:0;
|
||||
z-index: 99999 !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.info{
|
||||
width: calc(100vw - 30px);
|
||||
background: #FFFFFF;
|
||||
border-radius: 4px 4px 4px 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
image{
|
||||
margin-top: 15px;
|
||||
margin-right: 17px;
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
align-self: flex-end;
|
||||
}
|
||||
.title{
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #5A5A5A;
|
||||
margin-left: 20px;
|
||||
margin-top: 7px;
|
||||
margin-bottom:6px;
|
||||
}
|
||||
.dec{
|
||||
font-weight: 400;
|
||||
font-size: 17px;
|
||||
color: #5A5A5A;
|
||||
margin-left: 20px;
|
||||
margin-top: 7px;
|
||||
}
|
||||
.btnbox{
|
||||
margin-top: 26px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-top: 1rpx solid #F2F2F2;
|
||||
.btn{
|
||||
width: calc(50% - 1rpx);
|
||||
height: 54px;
|
||||
line-height: 54px;
|
||||
font-weight: 400;
|
||||
font-size: 15px;
|
||||
color: #5A5A5A;
|
||||
text-align: center;
|
||||
}
|
||||
.btns{
|
||||
border-left: 1rpx solid #F2F2F2;
|
||||
color:#5795E6;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue