通话详情页

components/call-log/list/list.vue

@@ -3,9 +3,10 @@
 		<view v-for="(item, index) in list" :key="index" class="item" @touchstart="touchStart($event, index)"
 			@touchmove="touchMove($event, index)" @touchend="touchEnd($event, index)"
 			:style="{ 'transform': 'translateX(' + swiperList[index] + 'px)', 'transition': swiperList[index] == 0 ? 'all 0.3s' : '' }">
-			<view class="avatar" v-if="type != 'xiaomi'">
+			<view class="avatar" v-if="type != 'xiaomi'" @click="goDetail(item,index)">
 				<!-- 显示文字头像 -->
-				<view v-if="type == 'ios' && item.name && item.avatarType === 'text'" class="text-avatar" :class="{'text-avatar-18':getAvatarLength(item.name)==2}">
+				<view v-if="type == 'ios' && item.name && item.avatarType === 'text'" class="text-avatar"
+					:class="{'text-avatar-18':getAvatarLength(item.name)==2}">
 					{{ getAvatarText(item.name) }}
 				</view>
 				<!-- 显示图片头像 -->
@@ -30,7 +31,7 @@
 				<image v-else-if="type == 'vivo'&&(item.status==1||item.status==2)"
 					:src="`/static/image/call/vivoStatusIcon1.png`" mode="widthFix"> </image>
 			</view>
-			<view class="infoBox">
+			<view class="infoBox" @click="goDetail(item,index)">
 				<view class="left-box">
 					<view class="leftInfo">
 						<view class="title" :class="{ 'title-red': item.status == 3 }">
@@ -154,8 +155,8 @@
 				</view>
 				<view class="form-item">
 					<text class="form-label">状态</text>
-					 <uni-data-select class="form-select" v-model="editForm.status" :localdata="statusOptions" @change="onStatusChange"
+					<uni-data-select class="form-select" v-model="editForm.status" :localdata="statusOptions"
-						:clear="false"></uni-data-select>
+						@change="onStatusChange" :clear="false"></uni-data-select>
 				</view>
 				<view class="form-item">
 					<text class="form-label">电话备注</text>
@@ -163,8 +164,8 @@
 				</view>
 				<view class="form-item">
 					<text class="form-label">头像类型</text>
-					 <uni-data-select class="form-select" v-model="editForm.avatarType" :localdata="avatarTypeOptions" @change="onAvatarTypeChange"
+					<uni-data-select class="form-select" v-model="editForm.avatarType" :localdata="avatarTypeOptions"
-						:clear="false"></uni-data-select>
+						@change="onAvatarTypeChange" :clear="false"></uni-data-select>
 				</view>
 				<view class="form-item">
 					<text class="form-label">头像</text>
@@ -227,8 +228,8 @@
 				</view>
 				<view class="form-item">
 					<text class="form-label">状态 <text>*</text></text>
-					 <uni-data-select class="form-select"  v-model="addForm.status" :localdata="statusOptions" @change="onAddStatusChange"
+					<uni-data-select class="form-select" v-model="addForm.status" :localdata="statusOptions"
-						:clear="false"></uni-data-select>
+						@change="onAddStatusChange" :clear="false"></uni-data-select>
 				</view>
 				<view class="form-item">
 					<text class="form-label">卡几</text>
@@ -249,8 +250,8 @@
 				</view>
 				<view class="form-item">
 					<text class="form-label">头像类型</text>
-					 <uni-data-select class="form-select" v-model="addForm.avatarType" :localdata="avatarTypeOptions" @change="onAddAvatarTypeChange"
+					<uni-data-select class="form-select" v-model="addForm.avatarType" :localdata="avatarTypeOptions"
-						:clear="false"></uni-data-select>
+						@change="onAddAvatarTypeChange" :clear="false"></uni-data-select>
 				</view>
 				<view class="form-item">
 					<text class="form-label">头像</text>
@@ -304,8 +305,12 @@
 	import {
 		onUnload
 	} from "@dcloudio/uni-app";
-	import DateTimePicker from '@/components/dengrq-datetime-picker/dateTimePicker/index.vue';
+	import DateTimePicker from '@/components/dengrq-datetime-picker/dateTimePicker/index.vue';	import {
-
+		useStore
+	} from '@/store/index.js'
+	const {
+		setCallDetail
+	} = useStore()
 	const props = defineProps({
 		isHuise: {
 			type: Boolean,
@@ -691,6 +696,12 @@
 		}
 	]);
 	
+	const goDetail = (value,index) => {
+		setCallDetail(value)
+		uni.navigateTo({
+			url:'/pages/call-log/detail/callDetail?type='+props.type+'&index='+index
+		})
+	};
 	// 获取卡几文本
 	const getKjText = (value) => {
 		return value || '请选择';
@@ -795,7 +806,7 @@
 		editForm.kj = item.kj || '1';
 		editForm.address = item.address || '';
 		editForm.time = item.time || '';
-		editForm.status = item.status ||0;
+		editForm.status = item.status || 0;
 		editForm.notes = item.notes || '';
 		showEditModal.value = true;
 	};
@@ -1093,7 +1104,7 @@
 		// 移除字符串中可能存在的空格
 		const cleanStr = str.replace(/\s+/g, '');
 
-		if (cleanStr.length <= 3) {
+		if (cleanStr.length !=11) {
 			return cleanStr;
 		}
 
@@ -1123,7 +1134,7 @@
 	function choose() {
 		uni.chooseImage({
 			count: 1,
-		sourceType: [ 'album' , 'camera'],
+			sourceType: ['album', 'camera'],
 			maxDuration: 30,
 			camera: 'back',
 			success(res) {
@@ -1168,7 +1179,7 @@
 				});
 			}
 		})
-}
+	}
 
 	// 获取头像文字
 	const getAvatarText = (name) => {
@@ -1430,6 +1441,7 @@
 			height: 100%;
 			box-sizing: border-box;
 			box-shadow: 0 -0.3px 0 0 #C2C2C2;
+
 			.left-box {
 				.title {
 					font-weight: 400;
@@ -1528,10 +1540,11 @@
 	}
 
 	.call-list-oppo {
-		.kj{
+		.kj {
 			width: 20rpx !important;
 			height: 24rpx !important;
 		}
+
 		.item {
 			padding: 32rpx 36rpx 0 36rpx !important;
 			justify-content: space-between;
@@ -1645,10 +1658,11 @@
 	}
 
 	.call-list-huawei {
-		.kj{
+		.kj {
 			width: 18rpx !important;
 			height: 22rpx !important;
 		}
+
 		.item {
 			padding: 24rpx 32rpx 0 32rpx !important;
 			justify-content: space-between;
@@ -1757,7 +1771,8 @@
 		font-size: 28rpx;
 		color: #666;
 		margin-bottom: 16rpx;
-		text{
+
+		text {
 			color: red;
 		}
 	}
@@ -1772,18 +1787,22 @@
 		box-sizing: border-box;
 		color: #1A1A1A;
 	}
-	.form-select{
+
+	.form-select {
 		width: 364rpx !important;
 		flex: none;
 	}
+
 	.form-avatar-container {
 		display: flex;
 		align-items: center;
 	}
-	.suiji{
+
+	.suiji {
 		width: 50rpx;
 		height: 50rpx;
 	}
+
 	.form-avatar {
 		width: 80px;
 		height: 80px;
@@ -1828,9 +1847,11 @@
 		font-weight: bold;
 		background: linear-gradient(180deg, #A1A8B8 0%, #878B94 100%);
 	}
-.text-avatar-18{
+
+	.text-avatar-18 {
 		font-size: 36rpx !important;
-}
+	}
+
 	.form-input-time {
 		line-height: 40px;
 	}

components/call-log/tabbar/tabbar.vue

@@ -6,10 +6,7 @@
 		</view>
 	</view>
 	<view class="footer footerZhangwei" :class="['footer_'+type]">
-		<view class="item" v-for="(item,index) in list" :key="index">
+		
-			<image :src="`/static/image/call/${type}TabbarImg${index+1}.png`" mode=""></image>
-			<text>{{item}}</text>
-		</view>
 	</view>
 </template>
 
@@ -86,10 +83,7 @@
 </script>
 
 <style scoped lang="scss">
-	.footerZhangwei{
+
-		position: relative !important; 
-		opacity: 0 !important;
-	}
 	.footer {
 		position: fixed;
 		left: 0;
@@ -98,7 +92,7 @@
 		display: flex;
 		justify-content: space-around;
 		background: #f7f7f7;
-
+		padding-top: 2px;
 		.item {
 			display: flex;
 			flex-direction: column;
@@ -118,7 +112,6 @@
 	}
 
 	.footer_ios {
-		padding-top: 2px;
 		padding-bottom: constant(safe-area-inset-bottom) !important; // 兼容 IOS<11.2 
 		padding-bottom: env(safe-area-inset-bottom) !important; // 兼容 IOS>11.2 
 		.item:nth-child(2) {
@@ -127,6 +120,13 @@
 			}
 		}
 	}
+	.footerZhangwei{
+		position: relative !important; 
+		opacity: 0 !important;
+		padding-top: 0 !important;
+		height: 47px;
+		background-color: rgba(0, 0, 0, 0) !important; 
+	}
 	.footer_huawei {
 		background: #FAFAFA !important;
 		padding-top: 3px;

components/watermark/watermark.vue

@@ -60,7 +60,7 @@ export default {
 	justify-content: center;
 	z-index: 99 !important;
 	background-image: url('/static/image/watermarkBG.png');
-	background-size: 125px 125px;
+	background-size: 500rpx 500rpx;
 
 	.watermarkBox {
 		width: 200px;

pages.json

@@ -17,6 +17,12 @@
 					"navigationBarTitleText": "通话记录页面",
 					"navigationStyle": "custom"
 				}
+			},{
+				"path": "detail/callDetail",
+				"style": {
+					"navigationBarTitleText": "通话记录详情",
+					"navigationStyle": "custom"
+				}
 			}]
 		},
 		{

store/index.js

@@ -1,12 +1,18 @@
-import { reactive, ref, watch } from 'vue';
+import {
-import { storage } from '../utils/storage';
+	reactive,
+	ref,
+	watch
+} from 'vue';
+import {
+	storage
+} from '../utils/storage';
 
 
 
 // 防抖函数
 const debounce = (fn, delay = 300) => {
 	let timer = null
-  return function (...args) {
+	return function(...args) {
 		if (timer) clearTimeout(timer)
 		timer = setTimeout(() => {
 			fn.apply(this, args)
@@ -36,6 +42,7 @@ export const store = reactive({
 
 	// 账单列表
 	billList: JSON.parse(JSON.stringify(storage.get('bill_list') || [])),
+	callInfo: {}
 
 });
 
@@ -51,7 +58,10 @@ export const useStore = () => {
 	const updateBill = (id, updates) => {
 		const index = store.billList.findIndex(bill => bill.id === id);
 		if (index !== -1) {
-      store.billList[index] = { ...store.billList[index], ...updates };
+			store.billList[index] = {
+				...store.billList[index],
+				...updates
+			};
 			return store.billList[index];
 		}
 		return null;
@@ -69,13 +79,20 @@ export const useStore = () => {
 	const getBillList = () => {
 		return JSON.parse(JSON.stringify(store.billList))
 	}
-
+	const getCallDetail = () => {
+		return JSON.parse(JSON.stringify(store.callInfo))
+	}
+	const setCallDetail = (info) => {
+		return store.callInfo = info
+	};
 	return {
 		store,
 		addBill,
 		updateBill,
 		deleteBill,
-    getBillList
+		getBillList,
+		setCallDetail,
+		getCallDetail
 	};
 };
 
@@ -86,14 +103,16 @@ const debouncedSaveSettings = debounce((newValue) => {
 
 watch(
 	() => store.userInfo,
-  (newValue) => storage.set('userInfo', newValue),
+	(newValue) => storage.set('userInfo', newValue), {
-  { deep: true }
+		deep: true
+	}
 );
 
 watch(
 	() => store.settings,
-  (newValue) => debouncedSaveSettings(newValue),
+	(newValue) => debouncedSaveSettings(newValue), {
-  { deep: true }
+		deep: true
+	}
 );
 
 // 监听billList改变自动保存
@@ -102,7 +121,7 @@ watch(
 	(newValue) => {
 		console.log("store.billList changed, saving...")
 		storage.set('bill_list', newValue)
-  },
+	}, {
-  { deep: true }
+		deep: true
+	}
 );
-