diff --git a/components/my-icon/my-icon.vue b/components/my-icon/my-icon.vue
new file mode 100644
index 0000000..3f81b48
--- /dev/null
+++ b/components/my-icon/my-icon.vue
@@ -0,0 +1,97 @@
+<template>
+  <text 
+    class="custom-icon" 
+    :class="iconClass" 
+    :style="{ color: color, fontSize: size + 'px' }"
+    @click="$emit('click')"
+  ></text>
+</template>
+
+<script>
+export default {
+  name: "my-icon",
+  props: {
+    // 图标名称，例如 'icon-home'
+    name: {
+      type: String,
+      default: ""
+    },
+    // 图标颜色
+    color: {
+      type: String,
+      default: "#333333"
+    },
+    // 图标大小，单位 rpx
+    size: {
+      type: [Number, String],
+      default: 16
+    }
+  },
+  computed: {
+    iconClass() {
+      // 这里的 'custom-icon' 必须和下面 font-family 的定义或者样式前缀对应
+      const name = `icon-${this.name}`;
+      return name;
+    }
+  }
+}
+</script>
+
+<style scoped>
+/* 1. 引入并定义字体名称 */
+@font-face {
+  font-family: 'myIconFont'; 
+  /* 微信小程序若本地引用报错，可换成 base64 字符串或网络绝对路径 */
+  src: url('@/static/font/iconfont.ttf') format('truetype');
+}
+
+/* 2. 定义基础样式 */
+.custom-icon {
+  font-family: "myIconFont" !important;
+  font-size: inherit;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  display: inline-block;
+}
+
+.icon-sanjiaozhou-maohao:before {
+  content: "\e630";
+}
+.icon-sanjiaozhou-fengexian:before {
+  content: "\e631";
+}
+.icon-sanjiaozhou-douhao:before {
+  content: "\e626";
+}
+.icon-sanjiaozhou-0:before {
+  content: "\e629";
+}
+.icon-sanjiaozhou-1:before {
+  content: "\e627";
+}
+.icon-sanjiaozhou-2:before {
+  content: "\e62b";
+}
+.icon-sanjiaozhou-3:before {
+  content: "\e62c";
+}
+.icon-a-sanjiaozhou-4:before {
+  content: "\e62f";
+}
+.icon-sanjiaozhou-5:before {
+  content: "\e62d";
+}
+.icon-sanjiaozhou-6:before {
+  content: "\e628";
+}
+.icon-sanjiaozhou-7:before {
+  content: "\e625";
+}
+.icon-sanjiaozhou-8:before {
+  content: "\e62a";
+}
+.icon-sanjiaozhou-9:before {
+  content: "\e62e";
+}
+</style>
\ No newline at end of file
diff --git a/pages.json b/pages.json
index 0c30da6..c5018f0 100644
--- a/pages.json
+++ b/pages.json
@@ -429,6 +429,22 @@
 						"navigationStyle": "custom"
 					}
 				},
+				{
+					"path" : "game/sanjiaozhou",
+					"style" : 
+					{
+						"navigationBarTitleText" : "三角洲",
+						"navigationStyle": "custom"
+					}
+				},
+				{
+					"path" : "game/index",
+					"style" : 
+					{
+						"navigationBarTitleText" : "游戏首页",
+						"navigationStyle": "custom"
+					}
+				},
 				{
 					"path" : "wx-payment-success/wx-payment-success",
 					"style" : 
@@ -476,6 +492,14 @@
 						"navigationBarTitleText" : "广东",
 						"navigationStyle": "custom"
 					}
+				},
+				{
+					"path" : "video-chat/video-chat",
+					"style" : 
+					{
+						"navigationBarTitleText" : "视频单聊",
+						"navigationStyle": "custom"
+					}
 				}
 			]
 		},
diff --git a/pages/index/index.nvue b/pages/index/index.nvue
index c7a4c89..7766a69 100644
--- a/pages/index/index.nvue
+++ b/pages/index/index.nvue
@@ -275,6 +275,11 @@ const otherList = [{
 	name: "视频群聊",
 	path: "/pages/other/video-group-chat/video-group-chat"
 },
+{
+	icon: "/static/image/index/qita/shipinqunliao.png",
+	name: "视频单聊",
+	path: "/pages/other/video-chat/video-chat"
+},
 {
 	icon: "/static/image/index/qita/zhifuchenggong-wx.png",
 	name: "微信支付",
@@ -297,8 +302,8 @@ const otherList = [{
 },
 {
 	icon: "/static/image/index/qita/game.png",
-	name: "王者主页",
-	path: "/pages/other/game/honor-of-kings"
+	name: "游戏",
+	path: "/pages/other/game/index"
 },
 {
 	icon: "/static/image/other/certificate/certificate.png",
diff --git a/pages/other/game/index.vue b/pages/other/game/index.vue
new file mode 100644
index 0000000..6fa6a50
--- /dev/null
+++ b/pages/other/game/index.vue
@@ -0,0 +1,150 @@
+<template>
+	<view class="container">
+		<nav-bar title="游戏平台" bgColor="#F0F4F9"></nav-bar>
+		<view class="menu-container">
+			<view class="card" v-for="(item, index) in menuList" :key="index" style=" background: #ffffff ">
+				<text class="card-title">{{ item.name }}</text>
+				<view class="icon-wrapper">
+					<view class="icon-shadow" :style="{ background: item.shadowColor }"></view>
+					<image class="icon-img" :src="`/static/image/other/game/${item.icon}.png`" mode="aspectFit"></image>
+				</view>
+				<view class="btn" style="background: linear-gradient( 327deg, #1777FF 0%, #17CDFF 100%);"
+					@click="goTo(item.url)">立即进入</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import {
+	ref,
+	getCurrentInstance
+} from 'vue';
+import {
+	onLoad
+} from '@dcloudio/uni-app'
+
+const {
+	proxy
+} = getCurrentInstance();
+
+onLoad(() => {
+	proxy.$apiUserEvent('all', {
+		type: 'event',
+		key: 'game',
+		prefix: '.uni.other.',
+		value: '游戏'
+	})
+})
+
+const menuList = ref([{
+	name: "王者荣耀",
+	icon: "wangzhe",
+	shadowColor: "#FF604F",
+	url: "/pages/other/game/honor-of-kings"
+}, {
+	name: "三角洲",
+	icon: "sanjiaozhou",
+	shadowColor: "#12C96A",
+	url: "/pages/other/game/sanjiaozhou"
+}, {
+	name: "和平精英",
+	icon: "hepingjingying",
+	shadowColor: "#4992F2",
+	url: ""
+}, {
+	name: "无畏契约",
+	icon: "wuweiqiyue",
+	shadowColor: "#FF3333",
+	url: ""
+}]);
+
+const goTo = (url) => {
+	if (url) {
+		uni.navigateTo({
+			url: url
+		})
+	} else {
+		uni.showToast({
+			title: "开发中",
+			icon: "none"
+		})
+	}
+}
+</script>
+
+<style>
+page {
+	background-color: #F0F4F9;
+}
+</style>
+<style lang="less" scoped>
+.container {
+	min-height: 100vh;
+}
+
+.menu-container {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: space-between;
+	padding: 24rpx;
+}
+
+.card {
+	width: calc(50% - 14rpx);
+	border-radius: 28rpx 28rpx 28rpx 28rpx;
+	margin-bottom: 24rpx;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	padding-top: 48rpx;
+	padding-bottom: 40rpx;
+	box-sizing: border-box;
+	border: 1px solid #ffffff;
+}
+
+.card-title {
+	font-size: 28rpx;
+	color: #1A1A1A;
+	font-weight: 500;
+}
+
+.icon-wrapper {
+	margin-top: 40rpx;
+	margin-bottom: 62rpx;
+	position: relative;
+	width: 116rpx;
+	height: 116rpx;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.icon-img {
+	width: 116rpx;
+	height: 116rpx;
+	z-index: 2;
+}
+
+.icon-shadow {
+	position: absolute;
+	bottom: -10rpx;
+	width: 100rpx;
+	height: 8rpx;
+	border-radius: 50%;
+	filter: blur(5px);
+	z-index: 1;
+	opacity: 0.6;
+}
+
+.btn {
+	padding: 0 20rpx;
+	height: 56rpx;
+	line-height: 56rpx;
+	border-radius: 16rpx 16rpx 16rpx 16rpx;
+	color: #fff;
+	font-size: 24rpx;
+	text-align: center;
+	font-weight: 500;
+}
+</style>
\ No newline at end of file
diff --git a/pages/other/game/sanjiaozhou.vue b/pages/other/game/sanjiaozhou.vue
new file mode 100644
index 0000000..56eea25
--- /dev/null
+++ b/pages/other/game/sanjiaozhou.vue
@@ -0,0 +1,833 @@
+<template>
+	<view class="honor-of-kings">
+		<nav-bar title="三角洲结算页" bgColor="#F5F5F5" isRightButton :rightButtonText="rightButtonText"
+			@right-click="onRightClick">
+		</nav-bar>
+		<view style="padding: 8px;box-sizing: border-box;">
+			<view class="painter-container" @click="handlePreview"
+				:style="`width:calc(100vw - 16px) ; height: ${posterContainerHeight}px; overflow: hidden; position: relative; transform: translateZ(0);`">
+				<!-- 运用 js 算出的无误差纯数字 scale 来实现高清画板的等比缩小，彻底兼容所有老旧内核，不再被截断 -->
+				<view
+					:style="`width: 750px; transform: scale(${posterScaleRatio}); transform-origin: left top; position: absolute; left: 0; top: 0;`">
+					<l-painter isCanvasToTempFilePath @success="onPainterSuccess" :css="`width:750px;`">
+						<l-painter-view :css="`width: 750.0px; position: relative;`">
+							<!-- 直接使用主背景图撑开父容器，移除不必要的 opacity: 0 占位图，避免在大屏渲染时产生黑块 -->
+							<l-painter-image :src="`/static/image/other/game/sanjiaozhou/style-${data.type}.jpg`"
+								css="width: 750.0px; display: block;"></l-painter-image>
+
+							<l-painter-view css="position: absolute; left: 73px; top: 113px; white-space: nowrap;">
+								<!-- 地图 -->
+								<l-painter-image :src="`/static/image/other/game/sanjiaozhou/line.png`"
+									css="display: inline-block; vertical-align: middle; height: 22px; width: 1px;"></l-painter-image>
+								<l-painter-view
+									css="display: inline-block; vertical-align: middle; padding-left: 4px; min-width: 60px;">
+									<l-painter-text
+										css="display: block; color:#CDCDCD; font-size:6px; line-height:6px; margin-bottom: 4px; white-space: nowrap;"
+										:text="data.map.level"></l-painter-text>
+									<l-painter-text
+										css="display: block; color:#CDCDCD; font-size:10px; line-height:10px; white-space: nowrap;"
+										:text="data.map.name"></l-painter-text>
+								</l-painter-view>
+								<!-- 撤离点 -->
+								<l-painter-image :src="`/static/image/other/game/sanjiaozhou/line.png`"
+									css="display: inline-block; vertical-align: middle; height: 22px; width: 1px;margin-left: 2px;"></l-painter-image>
+								<l-painter-view
+									css="display: inline-block; vertical-align: middle; padding-left: 4px; min-width: 60px;">
+									<l-painter-text
+										css="display: block; color:#CDCDCD; font-size:6px; line-height:6px; margin-bottom: 4px; white-space: nowrap;"
+										text="撤离点"></l-painter-text>
+									<l-painter-text
+										css="display: block; color:#CDCDCD; font-size:10px; line-height:10px; white-space: nowrap;"
+										:text="data.extractionPoint"></l-painter-text>
+								</l-painter-view>
+								<!-- 时长 -->
+								<l-painter-image :src="`/static/image/other/game/sanjiaozhou/line.png`"
+									css="display: inline-block; vertical-align: middle; height: 22px; width: 1px;margin-left: 2px;"></l-painter-image>
+								<l-painter-view
+									css="display: inline-block; vertical-align: middle; padding-left: 4px; min-width: 60px;">
+									<l-painter-text
+										css="display: block; color:#CDCDCD; font-size:6px; line-height:6px; margin-bottom: 4px; white-space: nowrap;"
+										text="时长"></l-painter-text>
+									<l-painter-text v-for="(char, idx) in String(data.duration).split('')"
+										:key="'durationNum_' + idx" :css="getTimeCharStyle(char, idx, $system)"
+										:text="getDefeatIconText(char)"></l-painter-text>
+								</l-painter-view>
+								<!-- 对局时间 -->
+								<l-painter-image :src="`/static/image/other/game/sanjiaozhou/line.png`"
+									css="display: inline-block; vertical-align: middle; height: 22px; width: 1px;margin-left: 2px;"></l-painter-image>
+								<l-painter-view
+									css="display: inline-block; vertical-align: middle; padding-left: 4px; min-width: 60px;">
+									<l-painter-text
+										css="display: block; color:#CDCDCD; font-size:6px; line-height:6px; margin-bottom: 4px; white-space: nowrap;"
+										text="对局时间"></l-painter-text>
+									<!-- <l-painter-text
+										css="display: block; color:#CDCDCD; font-size:10px; line-height:10px; white-space: nowrap;"
+										:text="data.map.name"></l-painter-text> -->
+									<l-painter-text v-for="(char, idx) in String(data.matchTime).split('')"
+										:key="'matchTimeNum_' + idx" :css="getTimeCharStyle(char, idx, $system)"
+										:text="getDefeatIconText(char)"></l-painter-text>
+								</l-painter-view>
+
+							</l-painter-view>
+
+							<!-- 本局收获 -->
+							<l-painter-view
+								css="position: absolute; left: 73px; top: 175px; white-space: nowrap; display: block;">
+								<l-painter-text
+									v-for="(char, idx) in String(data.harvest).replace(/\B(?=(\d{3})+(?!\d))/g, ',').split('')"
+									:key="'harvestNum_' + idx" :css="getHarvestCharStyle(char, idx, $system)"
+									:text="getDefeatIconText(char)"></l-painter-text>
+							</l-painter-view>
+
+							<!-- 击败干员 -->
+							<l-painter-view
+								css="position: absolute; left: 73px; top: 250px; white-space: nowrap; display: block;">
+								<l-painter-text v-for="(char, idx) in String(data.defeat).split('')"
+									:key="'bigNum_' + idx"
+									:css="`display: inline-block; color:#DBE5E6; font-size:22px; line-height:6px; margin-bottom: 4px; font-family: myIconFont; margin-left: ${idx === 0 ? '0' : '-2px'};`"
+									:text="getDefeatIconText(char)"></l-painter-text>
+							</l-painter-view>
+
+							<!-- 高光击败 -->
+							<l-painter-view v-for="(item, index) in data.defeatInfo" :key="index"
+								:css="`display: inline-block; vertical-align: middle;position: absolute; left: 73px; top: ${295 + index * 16}px; `">
+								<l-painter-view css="display: inline-block;">
+									<l-painter-image src="/static/image/other/game/sanjiaozhou/kill.png"
+										css="width: 12px; height: 12px; display: inline-block;margin-right:2px"></l-painter-image>
+									<l-painter-text
+										css="display: inline-block; color:#DBE5E6; font-size:9px; line-height:6px; margin-bottom: 4px; white-space: nowrap;"
+										:text="`${item.name} [${item.rank}]`"></l-painter-text>
+								</l-painter-view>
+							</l-painter-view>
+
+							<!-- 玩家名称 -->
+							<l-painter-text
+								css="display: block; color:#CDCDCD; font-size:10px; line-height:10px; white-space: nowrap;transform:rotate(10deg);position:absolute;left:424px;top:310px;"
+								:text="data.name"></l-painter-text>
+
+							<l-painter-text
+								css="display: block; color:#CDCDCD; font-size:7px; line-height:10px; white-space: nowrap;transform:rotate(10deg);position:absolute;left:422px;top:321px;opacity: 0.6;"
+								text="信守不渝"></l-painter-text>
+
+							<!-- 水印 -->
+							<l-painter-image v-if="$isVip()" src="/static/image/other/shuiying.png"
+								:css="`position: absolute; left: 18.8px; bottom: 17.1px; width: 145.38px;height:42.76px`"></l-painter-image>
+						</l-painter-view>
+					</l-painter>
+				</view>
+			</view>
+		</view>
+
+		<!-- 水印 -->
+		<view v-if="$isVip()">
+			<liu-drag-button :canDocking="false"
+				@clickBtn="$goRechargePage('watermark', 'uni_alipay_other_sanjiaozhou')">
+				<c-lottie ref="cLottieRef" :src='$watermark()' width="94px" height='74px' :loop="true"></c-lottie>
+			</liu-drag-button>
+		</view>
+
+		<view class="save-action">
+			<button class="save-btn" @click="handleSave">保存</button>
+		</view>
+
+		<!-- 主题选择区域 -->
+		<view class="theme-selector">
+			<scroll-view scroll-x="true" class="theme-scroll" :show-scrollbar="false">
+				<view class="theme-list">
+					<view class="theme-item" v-for="(item, index) in ['样式一', '样式二', '样式三', '样式四']" :key="index + 1"
+						:class="{ active: data.type == index + 1 }" @click="handleChangeTheme(index + 1)">
+						<text class="theme-text">{{ item }}</text>
+					</view>
+				</view>
+			</scroll-view>
+		</view>
+
+		<!-- 数据编辑弹窗 -->
+		<uni-popup ref="editPopup" type="center">
+			<view class="edit-popup-content">
+				<view class="popup-header">
+					<text class="title">编辑主页数据</text>
+				</view>
+				<scroll-view scroll-y class="popup-scroll">
+					<view class="form-item">
+						<text class="label">玩家名称</text>
+						<input class="input" type="text" v-model="tempData.name" />
+					</view>
+					<view class="form-item">
+						<text class="label">地图级别</text>
+						<view class="button-group">
+							<view class="button-item" :class="{ active: tempData.map.level === '普通' }"
+								@click="tempData.map.level = '普通'">普通</view>
+							<view class="button-item" :class="{ active: tempData.map.level === '机密' }"
+								@click="tempData.map.level = '机密'">机密</view>
+							<view class="button-item" :class="{ active: tempData.map.level === '绝密' }"
+								@click="tempData.map.level = '绝密'">绝密</view>
+						</view>
+					</view>
+					<view class="form-item">
+						<text class="label">地图名称</text>
+						<input class="input" type="text" v-model="tempData.map.name" />
+					</view>
+					<view class="form-item">
+						<text class="label">撤离点</text>
+						<input class="input" type="text" v-model="tempData.extractionPoint" />
+					</view>
+					<view class="form-item">
+						<text class="label">对局时间</text>
+						<picker mode="multiSelector" :range="matchTimeRange" :value="matchTimeIndex"
+							@change="onMatchTimeChange" class="input"
+							style="height: 36px; line-height: 36px; display: flex; align-items: center;">
+							<text>{{ tempData.matchTime || '请选择时间' }}</text>
+						</picker>
+					</view>
+					<view class="form-item">
+						<text class="label">时长</text>
+						<picker mode="multiSelector" :range="durationRange" :value="durationIndex"
+							@change="onDurationChange" class="input"
+							style="height: 36px; line-height: 36px; display: flex; align-items: center;">
+							<text>{{ tempData.duration || '请选择时长' }}</text>
+						</picker>
+					</view>
+					<view class="form-item">
+						<text class="label">本局收获</text>
+						<input class="input" type="text" v-model="tempData.harvest" />
+					</view>
+					<view class="form-item">
+						<text class="label">击败干员</text>
+						<input class="input" type="text" v-model="tempData.defeat" @input="onDefeatChange" />
+					</view>
+					<view style="border: 1px dashed #007aff;padding: 10px;border-radius: 8px;"
+						v-if="tempData.defeatInfo && tempData.defeatInfo.length > 0">
+						<view v-for="(item, index) in tempData.defeatInfo" :key="'defeat_' + index"
+							style="margin-bottom: 10px;">
+							<view
+								style="display: flex; justify-content: flex-end; gap: 15px; margin-bottom: 5px; font-size: 12px; height: 16px;"
+								v-if="tempData.defeatInfo.length > 1">
+								<text v-if="index > 0" @click="moveDefeatUp(index)"
+									style="color: #007aff; cursor: pointer;">↑ 上移</text>
+								<text v-if="index < tempData.defeatInfo.length - 1" @click="moveDefeatDown(index)"
+									style="color: #007aff; cursor: pointer;">↓ 下移</text>
+							</view>
+							<view class="form-item">
+								<text class="label">被击败者{{ index + 1 }}昵称</text>
+								<input class="input" type="text" v-model="item.name" />
+							</view>
+							<view class="form-item" style="margin-bottom: 0;">
+								<text class="label">被击败者{{ index + 1 }}段位</text>
+								<input class="input" type="text" v-model="item.rank" />
+							</view>
+						</view>
+					</view>
+
+
+				</scroll-view>
+				<view class="popup-footer">
+					<button class="cancel-btn" @click="closeEditPopup">取消</button>
+					<button class="confirm-btn" @click="confirmEdit">确定</button>
+				</view>
+			</view>
+		</uni-popup>
+
+		<!-- 横向全屏放大预览层 -->
+		<view class="preview-overlay" v-if="showPreview" @click="showPreview = false">
+			<image class="preview-image" :src="finalPosterPath" mode="aspectFit"></image>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted, getCurrentInstance } from 'vue'
+import { onLoad, onUnload } from '@dcloudio/uni-app'
+const rightButtonText = ref("编辑");
+const { proxy } = getCurrentInstance();
+const showPreview = ref(false); // 控制全屏预览
+const isMountedReady = ref(false);
+
+// 获取系统宽度计算海报缩放比例，代替容易失效的 css calc()，确保全端兼容防截断
+const sysInfo = uni.getSystemInfoSync();
+const windowWidth = sysInfo.windowWidth || 375;
+const posterScaleRatio = windowWidth / 750;
+const posterContainerHeight = 430 * posterScaleRatio;
+
+// 页面表单数据字段
+const data = reactive({
+	type: 1, // 样式类型 1.2.3.4
+	name: '大坝猛攻哥',
+	map: {
+		name: '零号大坝',
+		level: '机密'
+	},
+	extractionPoint: '工业电梯',
+	duration: "00:25:19",
+	matchTime: '02-32 21:02',
+	harvest: '13526559',
+	defeat: '1',
+	defeatInfo: [
+		{
+			name: '大坝贪吃鼠',
+			rank: "黑鹰II"
+		},
+	]
+
+})
+
+// 数字到 my-icon iconfont Unicode 的映射字典
+const digitIconMap = {
+	'0': '\ue629', '1': '\ue627', '2': '\ue62b', '3': '\ue62c', '4': '\ue62f',
+	'5': '\ue62d', '6': '\ue628', '7': '\ue625', '8': '\ue62a', '9': '\ue62e',
+	',': '\ue626', ':': '\ue630',
+};
+
+const getDefeatIconText = (defeatStr) => {
+	if (!defeatStr && defeatStr !== 0) return '';
+	return String(defeatStr).split('').map(char => digitIconMap[char] || char).join('');
+};
+
+const getTimeCharStyle = (char, idx, system) => {
+	const fontSize = char === '-' ? 12 : (char === ':' ? 4 : 10);
+	let marginLeft = '-2px';
+	if (idx === 0 || system === 'iOS') {
+		marginLeft = char === '-' ? '2px' : '0px';
+	}
+	let marginRight = '0';
+	if ([' ', '-', ':'].includes(char)) {
+		if (char === '-' && system === 'Android') {
+			marginLeft = '0px'
+		}
+		if (char === ':' && system === 'Android') {
+			marginRight = '-1px';
+			marginLeft = '-1px'
+		} else if (char === ' ' && system === 'Android') {
+			marginRight = '2px';
+		} else {
+			marginRight = '1rpx';
+		}
+	}
+	return `display: inline-block; vertical-align: bottom; color:#CDCDCD; font-size:${fontSize}px; line-height:6px; margin-bottom: 4px; font-family:myIconFont; margin-left: ${marginLeft}; margin-right: ${marginRight};`;
+};
+
+const getHarvestCharStyle = (char, idx, system) => {
+	const fontSize = char === ',' ? 6 : 22;
+	let marginLeft = idx === 0 ? '0' : (char === ',' ? (system === 'iOS' ? '3px' : '1px') : (system === 'iOS' ? '2px' : '-3px'));
+	let marginRight = char === ',' && system === 'Android' ? '2px' : '0';
+	let marginTop = char === ',' ? '3px' : '0';
+	return `display: inline-block; vertical-align: bottom; color:#DBE5E6; font-size:${fontSize}px; margin-bottom: 4px; font-family: myIconFont; margin-left: ${marginLeft}; margin-right: ${marginRight}; margin-top: ${marginTop};`;
+};
+
+onLoad(() => {
+	const cachedData = uni.getStorageSync('sanjiaozhouData');
+	if (cachedData) {
+		Object.assign(data, cachedData);
+	}
+
+	uni.$on('editFormPhoto', (info) => {
+		tempData.avatar = info;
+		// #ifndef H5
+		if (info && !info.startsWith('/static/')) {
+			newAvatars.value.push(info);
+		}
+		// #endif
+	});
+
+	// 进入页面埋点
+	proxy.$apiUserEvent('all', {
+		type: 'click',
+		key: 'sanjiaozhou',
+		prefix: '.uni.other.',
+		value: "三角洲结算页"
+	})
+
+	// 加载海报需要用到的自定义数字字体
+	uni.loadFontFace({
+		family: 'myIconFont',
+		source: `url("/static/font/iconfont.ttf")`,
+		success() {
+			console.log('myIconFont 字体加载成功');
+		},
+		fail(err) {
+			console.error('myIconFont 字体加载失败', err);
+		}
+	});
+});
+
+onUnload(() => {
+	uni.$off('editFormPhoto');
+})
+
+const finalPosterPath = ref('');
+
+const editPopup = ref(null);
+const tempData = reactive({
+	map: {},
+	defeatInfo: [{}]
+});
+const newAvatars = ref([]);
+
+const onDefeatChange = (e) => {
+	const val = parseInt(e.detail.value) || 0;
+	const maxAllowed = Math.min(3, Math.max(0, val));
+
+	if (tempData.defeatInfo.length < maxAllowed) {
+		const toAdd = maxAllowed - tempData.defeatInfo.length;
+		for (let i = 0; i < toAdd; i++) {
+			tempData.defeatInfo.push({ name: '', rank: '' });
+		}
+	} else if (tempData.defeatInfo.length > maxAllowed) {
+		tempData.defeatInfo.splice(maxAllowed);
+	}
+};
+
+const moveDefeatUp = (index) => {
+	if (index > 0) {
+		const item = tempData.defeatInfo.splice(index, 1)[0];
+		tempData.defeatInfo.splice(index - 1, 0, item);
+	}
+};
+
+const moveDefeatDown = (index) => {
+	if (index < tempData.defeatInfo.length - 1) {
+		const item = tempData.defeatInfo.splice(index, 1)[0];
+		tempData.defeatInfo.splice(index + 1, 0, item);
+	}
+};
+
+// 时长选择器数据
+const durationRange = ref([
+	Array.from({ length: 100 }, (_, i) => (i < 10 ? '0' + i : i + '')),
+	Array.from({ length: 60 }, (_, i) => (i < 10 ? '0' + i : i + '')),
+	Array.from({ length: 60 }, (_, i) => (i < 10 ? '0' + i : i + ''))
+]);
+const durationIndex = ref([0, 0, 0]);
+
+const onDurationChange = (e) => {
+	const val = e.detail.value;
+	durationIndex.value = val;
+	tempData.duration = `${durationRange.value[0][val[0]]}:${durationRange.value[1][val[1]]}:${durationRange.value[2][val[2]]}`;
+};
+
+// 对局时间选择器数据
+const matchTimeRange = ref([
+	Array.from({ length: 12 }, (_, i) => (i + 1 < 10 ? '0' + (i + 1) : (i + 1) + '')),
+	Array.from({ length: 31 }, (_, i) => (i + 1 < 10 ? '0' + (i + 1) : (i + 1) + '')),
+	Array.from({ length: 24 }, (_, i) => (i < 10 ? '0' + i : i + '')),
+	Array.from({ length: 60 }, (_, i) => (i < 10 ? '0' + i : i + ''))
+]);
+const matchTimeIndex = ref([0, 0, 0, 0]);
+
+const onMatchTimeChange = (e) => {
+	const val = e.detail.value;
+	matchTimeIndex.value = val;
+	tempData.matchTime = `${matchTimeRange.value[0][val[0]]}-${matchTimeRange.value[1][val[1]]} ${matchTimeRange.value[2][val[2]]}:${matchTimeRange.value[3][val[3]]}`;
+};
+
+const initPickerIndexes = () => {
+	if (tempData.duration) {
+		const parts = tempData.duration.split(':');
+		if (parts.length === 3) {
+			durationIndex.value = [parseInt(parts[0]) || 0, parseInt(parts[1]) || 0, parseInt(parts[2]) || 0];
+		}
+	}
+	if (tempData.matchTime) {
+		const spaceSplit = tempData.matchTime.split(' ');
+		if (spaceSplit.length === 2) {
+			const dateParts = spaceSplit[0].split('-');
+			const timeParts = spaceSplit[1].split(':');
+			if (dateParts.length === 2 && timeParts.length === 2) {
+				matchTimeIndex.value = [(parseInt(dateParts[0]) || 1) - 1, (parseInt(dateParts[1]) || 1) - 1, parseInt(timeParts[0]) || 0, parseInt(timeParts[1]) || 0];
+			}
+		}
+	}
+};
+
+function handleChangeTheme(typeIndex) {
+	// 切换主题时，先清空旧海报，触发界面“加载中”提示
+	finalPosterPath.value = '';
+	data.type = typeIndex;
+	uni.setStorageSync('sanjiaozhouData', data);
+}
+
+function onRightClick() {
+	Object.assign(tempData, JSON.parse(JSON.stringify(data)));
+	initPickerIndexes();
+	newAvatars.value = [];
+	editPopup.value.open();
+}
+
+function closeEditPopup() {
+	// #ifndef H5
+	newAvatars.value.forEach(path => {
+		uni.removeSavedFile({ filePath: path });
+	});
+	// #endif
+	editPopup.value.close();
+}
+
+function confirmEdit() {
+	// #ifndef H5
+	// 删除多余的新上传文件
+	newAvatars.value.forEach(path => {
+		if (path !== tempData.avatar) {
+			uni.removeSavedFile({ filePath: path });
+		}
+	});
+	// 删除被替换掉的原本地头像
+	if (data.avatar !== tempData.avatar && data.avatar && !data.avatar.startsWith('/static/')) {
+		uni.removeSavedFile({ filePath: data.avatar });
+	}
+	// #endif
+
+	Object.assign(data, tempData);
+	uni.setStorageSync('sanjiaozhouData', data);
+	editPopup.value.close();
+
+	// 数据修改后，清空旧海报触发“加载中”提示，等待重新生成
+	finalPosterPath.value = '';
+}
+
+// 点击画布触发横向预览
+const handlePreview = () => {
+	if (!finalPosterPath.value) {
+		uni.showToast({ title: '海报仍在生成中，请稍候', icon: 'none' });
+		return;
+	}
+	showPreview.value = true;
+}
+
+// 画布生成成功后触发，保存最终的海报路径
+const onPainterSuccess = (path) => {
+	finalPosterPath.value = path;
+}
+
+// 点击保存按钮，将带有渐变字体的最终图片存入相册
+const handleSave = () => {
+	if (!finalPosterPath.value) {
+		uni.showToast({ title: '图片仍在生成中，请稍候', icon: 'none' })
+		return
+	}
+	uni.saveImageToPhotosAlbum({
+		filePath: finalPosterPath.value,
+		success: () => {
+			uni.showToast({ title: '保存成功', icon: 'success' })
+		},
+		fail: () => {
+			uni.showToast({ title: '保存失败', icon: 'none' })
+		}
+	})
+}
+
+onMounted(() => {
+	isMountedReady.value = true;
+})
+</script>
+
+<style lang="less" scoped>
+.preview-overlay {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background-color: #000;
+	z-index: 99999;
+	/* 抛弃 flex 布局，防止 width: 100vh 被父级限制而发生坍缩 */
+}
+
+.preview-overlay .preview-image {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	width: 100vh;
+	height: 100vw;
+	/* 先拉回自身中心点，再围绕中心点旋转 90 度 */
+	transform: translate(-50%, -50%) rotate(90deg);
+}
+
+.honor-of-kings {
+	width: 100%;
+	overflow-x: hidden;
+}
+
+.painter-container {
+	/* 强制画板缩放到设备屏幕宽度，避免物理 px 超出屏幕 */
+	padding: 8px;
+	zoom: calc(100vw / 798);
+	width: 100%;
+	max-width: 1000px;
+	/* 限制PC/iPad端的最大宽度 */
+	margin: 0 auto;
+}
+
+.save-action {
+	margin-top: 60rpx;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	padding-bottom: 220rpx;
+	/* 留出底部主题固定栏的安全空间 */
+
+	.save-btn {
+		margin-top: 60rpx;
+		width: 316rpx;
+		background: #1777FF;
+		color: #fff;
+		border-radius: 56rpx;
+	}
+
+}
+
+.theme-selector {
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	width: 100%;
+	padding-top: 20rpx;
+	padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
+	z-index: 99;
+
+	.theme-scroll {
+		width: 100%;
+		white-space: nowrap;
+
+		::-webkit-scrollbar {
+			display: none;
+			width: 0 !important;
+			height: 0 !important;
+			-webkit-appearance: none;
+			background: transparent;
+		}
+	}
+
+	.theme-list {
+		display: inline-block;
+		padding: 0 20rpx;
+
+		.theme-item {
+			display: inline-flex;
+			vertical-align: top;
+			margin: 0 10rpx;
+			padding: 0 40rpx;
+			height: 84rpx;
+			border-radius: 12rpx;
+			background-color: #FFFFFF;
+			justify-content: center;
+			align-items: center;
+			border: 2rpx solid transparent;
+			box-sizing: border-box;
+			transition: all 0.3s;
+
+			&.active {
+				background-color: #fff;
+				border-color: #3B7BFF;
+
+				.theme-text {
+					color: #3B7BFF;
+					font-weight: bold;
+				}
+			}
+
+			.theme-text {
+				font-size: 28rpx;
+				color: #666;
+			}
+		}
+	}
+}
+
+.edit-popup-content {
+	background-color: #fff;
+	border-radius: 20rpx;
+	width: 85vw;
+
+	.popup-header {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		padding: 40rpx 0 20rpx 0;
+
+		.title {
+			font-size: 34rpx;
+			font-weight: bold;
+			color: #333;
+		}
+	}
+
+	.popup-scroll {
+		height: 55vh;
+		padding: 20rpx 40rpx;
+		box-sizing: border-box;
+	}
+
+	.form-item {
+		display: flex;
+		align-items: center;
+		margin-bottom: 16rpx;
+		padding-bottom: 16rpx;
+
+		.label {
+			width: 200rpx;
+			font-size: 28rpx;
+			color: #333;
+		}
+
+		.avatar-uploader {
+			display: flex;
+			align-items: center;
+
+			.upload-btn {
+				width: 100rpx;
+				height: 100rpx;
+				border-radius: 50%;
+				background-color: #999DA7;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+
+				.plus {
+					font-size: 60rpx;
+					color: #fff;
+					font-weight: 300;
+					margin-top: -6rpx;
+				}
+			}
+
+			.avatar-preview {
+				position: relative;
+				width: 100rpx;
+				height: 100rpx;
+
+				.preview-img {
+					width: 100%;
+					height: 100%;
+					border-radius: 50%;
+				}
+
+				.delete-icon {
+					position: absolute;
+					top: -4rpx;
+					right: -4rpx;
+					width: 32rpx;
+					height: 32rpx;
+					background-color: red;
+					color: #fff;
+					border-radius: 50%;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					font-size: 30rpx;
+					line-height: 28rpx;
+				}
+			}
+		}
+
+		.input {
+			flex: 1;
+			font-size: 28rpx;
+			background-color: #F7F7F7;
+			border-radius: 12rpx;
+			height: 70rpx;
+			line-height: 70rpx;
+			padding: 0 20rpx;
+			color: #333;
+		}
+
+		.radio-group {
+			display: flex;
+			align-items: center;
+			gap: 40rpx;
+
+			.radio-item {
+				display: flex;
+				align-items: center;
+				cursor: pointer;
+
+				.radio-icon {
+					width: 28rpx;
+					height: 28rpx;
+					border-radius: 50%;
+					border: 2rpx solid #d9d9d9;
+					margin-right: 12rpx;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					box-sizing: border-box;
+
+					&.active {
+						border-color: #3B7BFF;
+
+						&::after {
+							content: '';
+							width: 14rpx;
+							height: 14rpx;
+							border-radius: 50%;
+							background-color: #3B7BFF;
+						}
+					}
+				}
+
+				.radio-text {
+					font-size: 28rpx;
+					color: #666;
+
+					&.active {
+						color: #3B7BFF;
+					}
+				}
+			}
+		}
+
+		.button-group {
+			display: flex;
+			align-items: center;
+			flex-wrap: nowrap;
+
+			.button-item {
+				padding: 4rpx 16rpx;
+				border-radius: 30rpx;
+				font-size: 26rpx;
+				margin-right: 16rpx;
+				color: #666;
+				background-color: #F7F7F7;
+				border: 2rpx solid transparent;
+				white-space: nowrap;
+				cursor: pointer;
+				transition: all 0.2s;
+
+				&.active {
+					color: #3B7BFF;
+					background-color: rgba(59, 123, 255, 0.1);
+					border-color: #3B7BFF;
+				}
+			}
+		}
+	}
+
+	.popup-footer {
+		display: flex;
+		justify-content: space-between;
+		padding: 20rpx 40rpx 40rpx;
+
+		button {
+			width: 46%;
+			height: 76rpx;
+			line-height: 76rpx;
+			font-size: 30rpx;
+			border-radius: 12rpx;
+			margin: 0;
+
+			&::after {
+				border: none;
+			}
+		}
+
+		.cancel-btn {
+			background-color: #F4F4F4;
+			color: #666;
+		}
+
+		.confirm-btn {
+			background-color: #3B7BFF;
+			color: #fff;
+		}
+	}
+}
+</style>
diff --git a/pages/other/video-chat/video-chat.vue b/pages/other/video-chat/video-chat.vue
new file mode 100644
index 0000000..f3d968c
--- /dev/null
+++ b/pages/other/video-chat/video-chat.vue
@@ -0,0 +1,1470 @@
+<template>
+	<!-- 水印 -->
+	<view v-if="$isVip()">
+		<watermark dark="light" source="uni_alipay_other_videoChat" />
+		<liu-drag-button :canDocking="false" @clickBtn="$goRechargePage('watermark', 'uni_alipay_other_videoChat')">
+			<c-lottie ref="cLottieRef" :src='$watermark()' width="94px" height='74px' :loop="true"></c-lottie>
+		</liu-drag-button>
+	</view>
+	<view class="container">
+		<view style="height: 100vh;position: fixed;width: 100vw;object-fit: cover;"
+			:style="{ background: !(data.isSwapped ? videoData.chat.other.isShowVideo : videoData.cameraOn) ? ('url(' + (data.isSwapped ? videoData.chat.other.avatar : videoData.chat.me.avatar) + ') no-repeat center/cover') : 'transparent' }">
+			<DomVideoPlayer ref="mainVideoRef"
+				v-if="data.isSwapped ? videoData.chat.other.isShowVideo : videoData.cameraOn"
+				style="width: 100vw;height: 100vh;object-fit: cover;display: block;"
+				:src="data.isSwapped ? getVideoUrl(videoData.chat.other.videoUrl) : getVideoUrl(videoData.chat.me.videoUrl)"
+				class="bg-image" mode="aspectFill" autoplay loop muted objectFit="cover" :controls="false"
+				:show-play-btn="false">
+			</DomVideoPlayer>
+
+			<template v-if="!data.isSwapped ? !videoData.cameraOn : !videoData.chat.other.isShowVideo">
+				<view
+					style="background: rgba(0,0,0,0.8);width: 100%;height: 100%;border-radius: 20rpx;backdrop-filter: blur(20px);">
+				</view>
+				<image class="avatar-1" style="height: 136rpx;width:136rpx;object-fit: cover;border-radius: 12rpx;"
+					:src="!data.isSwapped ? videoData.chat.me.avatar : videoData.chat.other.avatar" mode="aspectFill">
+				</image>
+			</template>
+		</view>
+
+
+
+		<!-- 导航栏 placeholder -->
+		<NavBar bgColor="transparent" tipLayerType="video-group-chat-tip" isTipLayer tipLayerText="修改聊天信息"
+			@button-click="util.clickTitlePopupButton" :buttonGroup="buttonGroup">
+
+			<!-- 通过作用域插槽接管按钮渲染 -->
+			<template #button="{ button }">
+				<!-- 如果是开关按钮，拦截点击事件冒泡，防止触发顶层关闭弹窗，并避免两次触发 click -->
+				<view v-if="button.isSwitch" @click.stop
+					style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;">
+					<text>{{ button.name }}</text>
+					<switch :checked="button.value" @change="button.click"
+						style="transform: scale(0.7); margin-left: 10rpx;"></switch>
+				</view>
+				<!-- 普通按钮，不拦截冒泡，直接走外层 button-box 的 click -->
+				<view v-else
+					style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;">
+					<text>{{ button.name }}</text>
+				</view>
+			</template>
+
+			<view class="nav-content">
+				<view class="left">
+					<image class="icon" style="width: 30rpx;height: 30rpx;"
+						src="/static/image/other/video-call/xuanfu.png">
+					</image>
+				</view>
+				<view class="center">
+					<text class="time">{{ data.timing }}</text>
+				</view>
+				<view v-if="data.isEdit" class="right" @click.stop>
+					<view class="button" @click="confirmEdit">完成</view>
+				</view>
+				<view v-else class="right">
+					<image class="icon" src="/static/image/other/video-call/suoding.png"></image>
+					<image style="margin-left: 30rpx;" class="icon" src="/static/image/other/video-call/add-user.png">
+					</image>
+				</view>
+
+			</view>
+		</NavBar>
+
+		<!-- 视频画面区域 -->
+		<movable-area class="video-container">
+			<movable-view class="bg-2-movable"
+				:style="{ background: !(data.isSwapped ? videoData.cameraOn : videoData.chat.other.isShowVideo) ? 'url(' + (data.isSwapped ? videoData.chat.me.avatar : videoData.chat.other.avatar) + ') no-repeat center/cover' : 'transparent' }"
+				direction="all" :x="data.bg2X" :y="data.bg2Y" :animation="true" @change="onBg2Change"
+				@touchend="onBg2TouchEnd" @click="swapVideo"
+				style="height: 408rpx; width: 188rpx; z-index: 10;border-radius: 20rpx;">
+				<DomVideoPlayer ref="subVideoRef"
+					v-if="data.isSwapped ? videoData.cameraOn : videoData.chat.other.isShowVideo" class="bg-2"
+					style="height: 100%;width: 100%;object-fit: cover;border-radius: 20rpx;display: block;"
+					:src="data.isSwapped ? getVideoUrl(videoData.chat.me.videoUrl) : getVideoUrl(videoData.chat.other.videoUrl)"
+					mode="aspectFill" autoplay loop muted objectFit="cover" :controls="false" :show-play-btn="false">
+				</DomVideoPlayer>
+
+				<template v-if="data.isSwapped ? !videoData.cameraOn : !videoData.chat.other.isShowVideo">
+					<view
+						style="background: rgba(0,0,0,0.8);width: 100%;height: 100%;border-radius: 20rpx;backdrop-filter: blur(10px);">
+					</view>
+					<image class="avatar-2" style="height: 92rpx;width:92rpx;object-fit: cover;border-radius: 12rpx;"
+						:src="data.isSwapped ? videoData.chat.me.avatar : videoData.chat.other.avatar"
+						mode="aspectFill">
+					</image>
+				</template>
+
+
+			</movable-view>
+		</movable-area>
+
+		<!-- 底部控制栏 -->
+		<view class="control-bar">
+			<view class="control-buttons">
+				<!-- 麦克风 -->
+				<view class="control-item">
+					<image class="control-btn" :class="{ active: videoData.micOn }" @click="changeInfo('micOn')"
+						:src="videoData.micOn ? '/static/image/other/video-call/mic-on.png' : '/static/image/other/video-call/mic-off.png'">
+					</image>
+					<!-- <view class="" :class="{ active: videoData.micOn }" >
+
+					</view> -->
+					<text class="control-label">{{ videoData.micOn ? '麦克风已开' : '麦克风已关' }}</text>
+				</view>
+
+				<!-- 扬声器 -->
+				<view class="control-item">
+					<image class="control-btn" :class="{ active: videoData.speakerOn }" @click="changeInfo('speakerOn')"
+						:src="videoData.speakerOn ? '/static/image/other/video-call/speaker-on.png' : '/static/image/other/video-call/speaker-off.png'">
+					</image>
+					<!-- <view class="" :class="{ active: videoData.speakerOn }" @click="changeInfo('speakerOn')">
+						
+					</view> -->
+					<text class="control-label">{{ videoData.speakerOn ? '扬声器已开' : '扬声器已关' }}</text>
+				</view>
+
+				<!-- 摄像头 -->
+				<view class="control-item">
+					<image class="control-btn" :class="{ active: videoData.cameraOn }" @click="changeInfo('cameraOn')"
+						:src="videoData.cameraOn ? '/static/image/other/video-call/camera-on.png' : '/static/image/other/video-call/camera-off.png'">
+					</image>
+					<!-- <view class="control-btn" :class="{ active: videoData.cameraOn }" @click="changeInfo('cameraOn')">
+					
+					</view> -->
+					<text class="control-label">{{ videoData.cameraOn ? '摄像头已开' : '摄像头已关' }}</text>
+				</view>
+			</view>
+			<view class="control-buttons" style="margin-bottom: 0;">
+				<image class="hangup-btn" style="background: #00000080;"
+					src="/static/image/other/video-call/xvnibeijing.png">
+				</image>
+
+				<!-- 挂断按钮 -->
+				<image class="hangup-btn" @click="hangup" src="/static/image/other/video-call/hangup.png"></image>
+
+				<image class="hangup-btn" style="background: #00000080;"
+					src="/static/image/other/video-call/xuanzhuan.png">
+				</image>
+			</view>
+		</view>
+	</view>
+
+	<!-- 时间编辑弹窗 -->
+	<view v-if="data.showTimeEditPopup" class="popup-overlay" @click="closeTimeEditPopup">
+		<view class="popup-content" @click.stop>
+			<view class="popup-header">
+				<text class="popup-title">通话时长</text>
+			</view>
+			<view class="popup-body">
+				<view class="time-edit-row">
+					<text class="time-label">分钟</text>
+					<input class="time-input" type="number" v-model="data.tempMinutes" placeholder="00" maxlength="3" />
+					<text class="time-separator">:</text>
+					<text class="time-label">秒钟</text>
+					<input class="time-input" type="number" v-model="data.tempSeconds" placeholder="00" maxlength="2" />
+				</view>
+			</view>
+			<view class="popup-footer">
+				<button class="btn-cancel" @click="closeTimeEditPopup">取消</button>
+				<button class="btn-save" @click="saveTimeEdit">保存</button>
+			</view>
+		</view>
+	</view>
+
+	<!-- 通话信息编辑弹窗 -->
+	<view v-if="data.showCallInfoPopup" class="popup-overlay" @click="data.showCallInfoPopup = false">
+		<view class="popup-content" style="width: 600rpx;" @click.stop>
+			<view class="popup-header">
+				<text class="popup-title">编辑通话信息</text>
+			</view>
+			<view class="popup-body" style="padding: 20rpx 40rpx; max-height: 60vh; overflow-y: auto;">
+
+				<view style="margin-bottom: 30rpx;">
+					<view style="font-size: 28rpx; color: #333; margin-bottom: 10rpx; font-weight: bold;">我方通话头像</view>
+					<view style="display: flex; align-items: center; justify-content: space-between;">
+						<image :src="videoData.chat.me.avatar"
+							style="width: 80rpx; height: 80rpx; border-radius: 10rpx;" mode="aspectFill"></image>
+						<button size="mini" style="margin: 0; background: #187AFF; color: #fff;"
+							@click="uploadMedia('me', 'avatar')">上传</button>
+					</view>
+				</view>
+
+				<view style="margin-bottom: 30rpx;">
+					<view style="font-size: 28rpx; color: #333; margin-bottom: 10rpx; font-weight: bold;">对方通话头像</view>
+					<view style="display: flex; align-items: center; justify-content: space-between;">
+						<image :src="videoData.chat.other.avatar"
+							style="width: 80rpx; height: 80rpx; border-radius: 10rpx;" mode="aspectFill"></image>
+						<button size="mini" style="margin: 0; background: #187AFF; color: #fff;"
+							@click="uploadMedia('other', 'avatar')">上传</button>
+					</view>
+				</view>
+
+				<view style="margin-bottom: 30rpx;">
+					<view style="font-size: 28rpx; color: #333; margin-bottom: 10rpx; font-weight: bold;">我方通话视频</view>
+					<view style="display: flex; align-items: center; justify-content: space-between;">
+						<text
+							style="font-size: 24rpx; color: #999; flex: 1; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; margin-right: 20rpx;">{{
+								videoData.chat.me.videoUrl }}</text>
+						<button size="mini" style="margin: 0; background: #187AFF; color: #fff;"
+							@click="uploadMedia('me', 'video')">上传</button>
+					</view>
+				</view>
+
+				<view style="margin-bottom: 30rpx;">
+					<view style="font-size: 28rpx; color: #333; margin-bottom: 10rpx; font-weight: bold;">对方通话视频</view>
+					<view style="display: flex; align-items: center; justify-content: space-between;">
+						<text
+							style="font-size: 24rpx; color: #999; flex: 1; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; margin-right: 20rpx;">{{
+								videoData.chat.other.videoUrl }}</text>
+						<button size="mini" style="margin: 0; background: #187AFF; color: #fff;"
+							@click="uploadMedia('other', 'video')">上传</button>
+					</view>
+				</view>
+
+			</view>
+			<view class="popup-footer">
+				<button class="btn-save" style="width: 100%; border-radius: 0 0 16rpx 16rpx;"
+					@click="data.showCallInfoPopup = false">完成</button>
+			</view>
+		</view>
+	</view>
+
+	<!-- 底部选项弹窗 -->
+	<view v-if="data.showMediaSelector" class="action-sheet-overlay" @click="closeMediaSelector">
+		<view class="action-sheet" @click.stop>
+			<view class="action-sheet-item" @click="chooseVideo">
+				<text class="action-sheet-text">选择视频</text>
+			</view>
+			<view class="action-sheet-item" @click="chooseImage">
+				<text class="action-sheet-text">选择图片</text>
+			</view>
+			<view class="action-sheet-divider"></view>
+			<view class="action-sheet-item" @click="closeMediaSelector">
+				<text class="action-sheet-text action-sheet-cancel">取消</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import NavBar from "@/components/nav-bar/nav-bar.vue"
+
+import { toRefs, onMounted, onUnmounted, reactive, computed, getCurrentInstance, ref } from 'vue'
+import { onLoad, onShow, onHide } from '@dcloudio/uni-app'
+import { util } from '@/utils/common.js'
+const {
+	proxy
+} = getCurrentInstance();
+
+const mainVideoRef = ref(null)
+const subVideoRef = ref(null)
+
+const autoPlayVideos = () => {
+	setTimeout(() => {
+		if (mainVideoRef.value) mainVideoRef.value.play()
+		if (subVideoRef.value) subVideoRef.value.play()
+	}, 200)
+}
+
+const getVideoUrl = (url) => {
+	// #ifdef APP-PLUS
+	if (url && !url.startsWith('http') && !url.startsWith('blob:')) {
+		return plus.io.convertLocalFileSystemURL(url)
+	}
+	// #endif
+	return url
+}
+
+const buttonGroup = computed(() => [
+	{
+		name: "编辑时间",
+		click: () => {
+			openTimeEditPopup()
+		}
+	},
+	{
+		name: "编辑通话信息",
+		click: () => {
+			data.showCallInfoPopup = true
+		}
+	},
+	{
+		name: "对方视频",
+		isSwitch: true,
+		value: data.videoData.chat.other.isShowVideo,
+		click: () => {
+			data.videoData.chat.other.isShowVideo = !data.videoData.chat.other.isShowVideo
+			uni.setStorageSync('videoChatData', data.videoData)
+		}
+	}
+])
+
+const data = reactive({
+	videoData: {
+		micOn: true,
+		speakerOn: true,
+		cameraOn: true,
+		timeText: '125:22',
+		chat: {
+			me: {
+				videoUrl: "",
+				imagePath: "",
+				avatar: "/static/image/shopping/pdd/avatars/avatars1.jpg",
+			},
+			other: {
+				videoUrl: "",
+				imagePath: "",
+				avatar: "/static/image/shopping/pdd/avatars/avatars2.jpg",
+				isShowVideo: true,
+			}
+		}
+	},
+	timing: 0,
+	videoDataBackup: null,  // 编辑模式备份
+	isEdit: false,
+	showCallInfoPopup: false,
+	statusBarHeight: 0,
+	// 时间编辑弹窗
+	showTimeEditPopup: false,
+	tempMinutes: '0',
+	tempSeconds: '00',
+	// 底部选项弹窗
+	showMediaSelector: false,
+	currentEditIndex: -1,  // 当前编辑的项索引 (-1表示新增, >=0表示替换)
+	// 拖动状态管理
+	dragState: {
+		draggingIndex: -1,   // 当前拖动的索引
+		startY: 0,           // 触摸起始Y坐标
+		startX: 0,           // 触摸起始X坐标
+		offsetX: 0,          // 当前X偏移量
+		offsetY: 0,          // 当前Y偏移量
+		longPressTimer: null, // 长按定时器
+		isDragging: false    // 是否正在拖动
+	},
+	// bg-2拖动状态
+	bg2X: 9999,
+	bg2Y: 0,
+	bg2CurrentX: 9999,
+	bg2CurrentY: 0,
+	isSwapped: true // 是否交换了展示画面
+})
+
+// 定时器引用，用于页面卸载时清理
+let statusBarTimer = null
+let timingTimer = null // 计时定时器
+
+let { videoData, statusBarHeight } = toRefs(data)
+
+// 视频网格样式计算属性
+const videoGridClass = computed(() => {
+	const count = videoData.value.videoList.length
+	if (data.isEdit) {
+		if (count <= 1) return 'video-grid-2'
+		if (count <= 3) return 'video-grid-3'
+	} else {
+		if (count <= 2) return 'video-grid-2'
+		if (count <= 4) return 'video-grid-3'
+	}
+	return 'video-grid-5'
+})
+
+// 获取当前网格的列数
+const getGridCols = () => {
+	const count = videoData.value.videoList.length
+	if (data.isEdit) {
+		if (count <= 1) return 2
+		if (count <= 3) return 2
+	} else {
+		if (count <= 2) return 2
+		if (count <= 4) return 2
+	}
+	return 3
+}
+
+// 获取网格尺寸
+const getGridSize = () => {
+	const cols = getGridCols()
+	return uni.getSystemInfoSync().windowWidth / cols
+}
+
+// 获取每个video-item的样式（用于拖动跟随）
+const getItemStyle = (index) => {
+	if (data.dragState.draggingIndex === index && data.dragState.isDragging) {
+		return {
+			transform: `translate(${data.dragState.offsetX}px, ${data.dragState.offsetY}px)`,
+			transition: 'none'
+		}
+	}
+	return {}
+}
+
+const onBg2Change = (e) => {
+	if (e.detail.source === 'touch') {
+		data.bg2CurrentX = e.detail.x
+		data.bg2CurrentY = e.detail.y
+	}
+}
+
+const swapVideo = () => {
+	// 仅切换展示状态标志位，不修改原始数据属性
+	data.isSwapped = !data.isSwapped
+	// 切换源后强制触发起播
+	autoPlayVideos()
+}
+
+const onBg2TouchEnd = () => {
+	const systemInfo = uni.getSystemInfoSync()
+	const windowWidth = systemInfo.windowWidth
+	const rpx2px = windowWidth / 750
+	const containerWidthPx = windowWidth - 32 * rpx2px
+	const imageWidthPx = 188 * rpx2px
+	const maxXPx = containerWidthPx - imageWidthPx
+
+	let targetX = data.bg2CurrentX > maxXPx / 2 ? maxXPx : 0
+
+	data.bg2X = data.bg2CurrentX
+	data.bg2Y = data.bg2CurrentY
+	setTimeout(() => {
+		data.bg2X = targetX
+	}, 50)
+}
+
+onMounted(() => {
+	const systemInfo = uni.getSystemInfoSync()
+	statusBarHeight.value = systemInfo.statusBarHeight || 0
+
+	const windowWidth = systemInfo.windowWidth
+	const rpx2px = windowWidth / 750
+	const containerWidthPx = windowWidth - 32 * rpx2px
+	const imageWidthPx = 188 * rpx2px
+	data.bg2X = containerWidthPx - imageWidthPx
+	data.bg2CurrentX = data.bg2X
+})
+
+onLoad(() => {
+	const videoData = uni.getStorageSync('videoChatData') || data.videoData
+	console.log('videoData1', videoData)
+	const videoDataNew = {
+		...videoData
+	}
+	data.timing = videoData.timeText
+	data.videoData = videoDataNew
+	console.log('videoData2', data.videoData)
+
+	// 进入视频群聊页面埋点
+	proxy.$apiUserEvent('all', {
+		type: 'event',
+		key: 'video_chat',
+		prefix: '.uni.other.',
+		value: "视频单聊"
+	})
+})
+
+onShow(() => {
+	// 恢复计时
+	const videoData = uni.getStorageSync('videoChatData')
+	if (videoData && videoData.timeText) {
+		data.timing = videoData.timeText
+	}
+	startTimer()
+
+	// 触发自动播放
+	autoPlayVideos()
+
+	// #ifdef APP-PLUS
+	util.setAndroidSystemBarColor('#232323')
+	// 保存定时器引用，以便在页面卸载时清理
+	statusBarTimer = setTimeout(() => {
+		plus.navigator.setStatusBarStyle("light");
+	}, 500)
+	// #endif
+})
+
+// 页面隐藏时清理定时器，防止返回时出错
+onHide(() => {
+	// 清理状态栏定时器
+	if (statusBarTimer) {
+		clearTimeout(statusBarTimer)
+		statusBarTimer = null
+	}
+
+	// 清理长按定时器
+	if (data.dragState.longPressTimer) {
+		clearTimeout(data.dragState.longPressTimer)
+		data.dragState.longPressTimer = null
+	}
+
+	// 重置拖动状态
+	data.dragState.isDragging = false
+	data.dragState.draggingIndex = -1
+
+	// 保存当前计时
+	if (data.timing) {
+		data.videoData.timeText = data.timing
+		uni.setStorageSync('videoChatData', data.videoData)
+	}
+
+	stopTimer() // 停止计时
+	console.log('🚪 页面隐藏，已清理定时器和状态')
+})
+
+// 页面卸载时清理所有定时器和资源
+onUnmounted(() => {
+	// 清理状态栏定时器
+	if (statusBarTimer) {
+		clearTimeout(statusBarTimer)
+		statusBarTimer = null
+	}
+
+	// 保存当前计时
+	if (data.timing) {
+		data.videoData.timeText = data.timing
+		uni.setStorageSync('videoChatData', data.videoData)
+	}
+
+	stopTimer() // 停止计时
+
+	// 清理长按定时器
+	if (data.dragState.longPressTimer) {
+		clearTimeout(data.dragState.longPressTimer)
+		data.dragState.longPressTimer = null
+	}
+
+	console.log('🧹 页面卸载，已清理所有定时器')
+})
+
+// 打开时间编辑弹窗
+const openTimeEditPopup = () => {
+	// 解析当前时间 (格式: "125:22")
+	const timingStr = data.timing ? String(data.timing) : '0:00'
+	const parts = timingStr.split(':')
+	data.tempMinutes = parts[0] || '0'
+	data.tempSeconds = parts[1] || '00'
+	data.showTimeEditPopup = true
+}
+
+// 保存时间编辑
+const saveTimeEdit = () => {
+	// 格式化分钟和秒钟
+	const minutes = parseInt(data.tempMinutes) || 0
+	const seconds = parseInt(data.tempSeconds) || 0
+
+	// 秒钟不能超过59
+	const validSeconds = Math.min(59, Math.max(0, seconds))
+
+	// 格式化为两位数
+	const formattedSeconds = validSeconds.toString().padStart(2, '0')
+
+	// 更新时间文本
+	data.videoData.timeText = `${minutes}:${formattedSeconds}`
+
+	// 保存到storage
+	uni.setStorageSync('videoChatData', data.videoData)
+
+	// 更新当前计时显示并重启计时器以确保同步
+	data.timing = data.videoData.timeText
+	startTimer()
+
+	// 关闭弹窗
+	data.showTimeEditPopup = false
+}
+
+const uploadMedia = (type, mediaType) => {
+	if (mediaType === 'avatar') {
+		uni.chooseImage({
+			count: 1,
+			sizeType: ['original'], // 防止 iOS 压缩时丢弃图片旋转方向
+			success: (res) => {
+				const tempPath = res.tempFilePaths[0]
+				uni.saveFile({
+					tempFilePath: tempPath,
+					success: (saveRes) => {
+						data.videoData.chat[type].avatar = saveRes.savedFilePath
+						uni.setStorageSync('videoChatData', data.videoData)
+					}
+				})
+			}
+		})
+	} else if (mediaType === 'video') {
+		uni.chooseVideo({
+			count: 1,
+			compressed: false, // 核心修复：禁止 iOS 强制重新编码，保留原视频竖向元数据(Matrix属性)
+			success: (res) => {
+				let tempPath = res.tempFilePath
+				// #ifdef APP-PLUS
+				tempPath = plus.io.convertLocalFileSystemURL(tempPath)
+				// #endif
+				uni.saveFile({
+					tempFilePath: tempPath,
+					success: (saveRes) => {
+						data.videoData.chat[type].videoUrl = saveRes.savedFilePath
+						uni.setStorageSync('videoChatData', data.videoData)
+						autoPlayVideos()
+					}
+				})
+			}
+		})
+	}
+}
+
+// 关闭时间编辑弹窗
+const closeTimeEditPopup = () => {
+	data.showTimeEditPopup = false
+}
+
+// 判断是否为临时文件路径
+const isTempFilePath = (filePath) => {
+	if (!filePath) return false
+
+	const lowerPath = filePath.toLowerCase()
+
+	// 永久路径白名单 - 如果路径包含这些特征,则明确判定为永久路径
+	const permanentKeywords = [
+		'/downloads/',           // UniApp 永久下载目录
+		'saved_video_',          // 已保存的视频文件
+		'saved_image_'           // 已保存的图片文件
+	]
+
+	// 优先检查是否为永久路径
+	if (permanentKeywords.some(keyword => lowerPath.includes(keyword.toLowerCase()))) {
+		return false  // 明确不是临时路径
+	}
+
+	// 常见临时路径特征
+	const tempKeywords = [
+		'tmp',                    // 通用临时目录
+		'temp',                   // 通用临时目录
+		'cache',                  // 缓存目录
+		'_doc/uniapp_temp',       // UniApp Android 临时目录
+		'_downloads/temp',        // 下载临时目录
+		'/var/mobile/containers/data/application', // iOS 临时路径
+		'wxfile://tmp',           // 微信小程序临时文件
+		'http://tmp',             // 微信小程序临时文件
+		'/doc/',                  // Android UniApp 文档临时目录
+		'compress_video'          // UniApp 压缩视频临时文件
+	]
+
+	// 检查是否包含临时路径关键字
+	return tempKeywords.some(keyword => lowerPath.includes(keyword.toLowerCase()))
+}
+
+
+const confirmEdit = () => {
+	// 保存图片视频
+	// saveImageVideo()
+
+	// 退出编辑模式
+	data.isEdit = false
+	data.videoDataBackup = null
+	// 保存数据
+	// uni.setStorageSync('videoData', data.videoData)
+}
+
+/**
+ * 保存图片视频到本地
+ */
+const saveImage = async () => {
+	// 保存临时图片为永久路径
+	try {
+		// #ifdef APP-PLUS
+		const savePromises = data.videoData.videoList.map(async (item) => {
+			// 检查图片是否为临时路径
+			if (isTempFilePath(item.preview)) {
+				try {
+					const savedFile = await new Promise((resolve, reject) => {
+						uni.saveFile({
+							tempFilePath: item.preview,
+							success: (res) => resolve(res.savedFilePath),
+							fail: (err) => reject(err)
+						})
+					})
+					// 更新为永久路径
+					item.preview = savedFile
+					console.log('✅ 图片已保存:', savedFile)
+				} catch (error) {
+					console.error('❌ 保存图片失败:', item.preview, error)
+					// 保存失败时保持原路径
+				}
+			}
+		})
+		// 等待所有图片保存完成
+		await Promise.all(savePromises)
+		// #endif
+		console.log('✅ 视频数据已保存')
+	} catch (error) {
+		console.error('❌ 保存过程出错:', error)
+	}
+}
+
+const changeIconType = (item, index) => {
+
+	if (index == data.videoData.videoList.length - 1 && !data.videoData.micOn) {
+		return
+	}
+	item.iconType = item.iconType == 2 ? 0 : 2
+	uni.setStorageSync('videoChatData', data.videoData)
+}
+
+const addVideo = () => {
+	if (data.videoData.videoList.length >= 9) {
+		return
+	}
+	// 重置为新增模式
+	data.currentEditIndex = -1
+	// 显示底部选项弹窗
+	data.showMediaSelector = true
+}
+
+// 关闭底部选项弹窗
+const closeMediaSelector = () => {
+	data.showMediaSelector = false
+}
+
+/**
+ * 切换视频或图片
+ * @param item 
+ * @param index 
+ */
+const changeVideoOrImage = (item, index) => {
+	console.log('切换媒体:', item, index)
+	// 记录当前编辑的索引
+	data.currentEditIndex = index
+	// 显示媒体选择器
+	data.showMediaSelector = true
+}
+
+// 选择视频
+const chooseVideo = () => {
+	closeMediaSelector()
+	uni.chooseVideo({
+		count: 1,
+		sourceType: ['album', 'camera'],
+		maxDuration: 60,
+		camera: 'back',
+		success: async (res) => {
+			console.log('选择视频成功:', res)
+			const videoUrl = plus.io.convertLocalFileSystemURL(res.tempFilePath)
+			const savedVideoUrl = await new Promise((resolve, reject) => {
+				uni.saveFile({
+					tempFilePath: videoUrl,
+					success: (res) => resolve(res.savedFilePath),
+					fail: (err) => reject(err)
+				})
+			})
+			// 判断是替换还是新增
+			if (data.currentEditIndex >= 0) {
+				// 获取旧数据并删除旧文件
+				const oldItem = data.videoData.videoList[data.currentEditIndex]
+				if (oldItem) {
+					console.log('🔄 替换视频，删除旧文件...')
+					removeFile(oldItem.preview)
+					removeFile(oldItem.videoUrl)
+					removeFile(oldItem.savedVideoUrl)
+				}
+
+				// 替换模式:更新指定索引的项
+				data.videoData.videoList[data.currentEditIndex] = {
+					preview: '',
+					videoUrl: videoUrl,
+					savedVideoUrl: savedVideoUrl,
+					iconType: 0
+				}
+				console.log('✅ 已替换索引', data.currentEditIndex, '的视频')
+			} else {
+				// 新增模式:添加新项
+				data.videoData.videoList.unshift({
+					preview: '',
+					videoUrl: videoUrl,
+					savedVideoUrl: savedVideoUrl,
+					iconType: 0
+				})
+				console.log('✅ 已添加新视频')
+			}
+
+			// 保存到本地存储
+			uni.setStorageSync('videoChatData', data.videoData)
+			console.log('💾 数据已保存到本地存储')
+
+			// 重置编辑索引
+			data.currentEditIndex = -1
+		},
+		fail: (err) => {
+			console.error('选择视频失败:', err)
+			// 重置编辑索引
+			data.currentEditIndex = -1
+		}
+	})
+}
+
+// 选择图片
+const chooseImage = () => {
+	closeMediaSelector()
+
+	// 根据模式设置选择数量
+	const maxCount = data.currentEditIndex >= 0 ? 1 : (9 - data.videoData.videoList.length)
+
+	uni.chooseImage({
+		count: maxCount,
+		sizeType: ['original', 'compressed'],
+		sourceType: ['album', 'camera'],
+		success: (res) => {
+			console.log('选择图片成功:', res)
+
+			// 判断是替换还是新增
+			if (data.currentEditIndex >= 0) {
+				// 获取旧数据并删除旧文件
+				const oldItem = data.videoData.videoList[data.currentEditIndex]
+				if (oldItem) {
+					console.log('🔄 替换图片，删除旧文件...')
+					removeFile(oldItem.preview)
+					removeFile(oldItem.videoUrl)
+				}
+
+				// 替换模式:更新指定索引的项
+				data.videoData.videoList[data.currentEditIndex] = {
+					preview: res.tempFilePaths[0],
+					videoUrl: '',
+					savedVideoUrl: '',
+					iconType: 0
+				}
+				console.log('✅ 已替换索引', data.currentEditIndex, '的图片')
+			} else {
+				// 新增模式:添加新项
+				data.videoData.videoList.unshift(...res.tempFilePaths.map((item) => ({
+					preview: item,
+					videoUrl: '',
+					savedVideoUrl: '',
+					iconType: 0
+				})))
+				console.log('✅ 已添加', res.tempFilePaths.length, '张图片')
+			}
+			saveImage()
+			// 保存到本地存储
+			uni.setStorageSync('videoChatData', data.videoData)
+			console.log('💾 数据已保存到本地存储')
+
+			// 重置编辑索引
+			data.currentEditIndex = -1
+		},
+		fail: (err) => {
+			console.error('选择图片失败:', err)
+			// 重置编辑索引
+			data.currentEditIndex = -1
+		}
+	})
+}
+
+
+
+// 改变信息
+const changeInfo = (key) => {
+	data.videoData[key] = !data.videoData[key]
+	uni.setStorageSync('videoChatData', data.videoData)
+}
+
+// 删除本地保存的文件
+const removeFile = (filePath) => {
+	if (!filePath) return
+
+	// 如果是静态资源或临时文件，跳过
+	if (filePath.startsWith('/') && !filePath.startsWith('file://') && !filePath.includes('saved_')) {
+		// 简单的判断，保留 static 目录下的文件
+		if (filePath.includes('/static/')) return
+	}
+
+	console.log('🗑️ 准备删除文件:', filePath)
+
+	// #ifdef APP-PLUS
+	// 尝试使用 plus.io 删除 (支持 file:// 协议和 _downloads 等路径)
+	if (filePath.startsWith('file://') || filePath.includes('_downloads') || filePath.includes('saved_video_')) {
+		plus.io.resolveLocalFileSystemURL(filePath, (entry) => {
+			entry.remove(() => {
+				console.log('✅ plus.io 删除文件成功:', filePath)
+			}, (e) => {
+				console.log('⚠️ plus.io 删除文件失败:', e.message)
+			})
+		}, (e) => {
+			// 文件可能不存在
+			console.log('⚠️ plus.io 解析路径失败 (可能文件已不存在):', e.message)
+		})
+		return
+	}
+	// #endif
+
+	// 尝试使用 uni.removeSavedFile (主要针对 uni.saveFile 保存的文件)
+	uni.removeSavedFile({
+		filePath: filePath,
+		success: () => {
+			console.log('✅ uni.removeSavedFile 删除成功:', filePath)
+		},
+		fail: (err) => {
+			console.log('⚠️ uni.removeSavedFile 删除失败:', err)
+		}
+	})
+}
+
+const deleteVideo = (index) => {
+	const item = data.videoData.videoList[index]
+	if (item) {
+		removeFile(item.preview)
+		removeFile(item.videoUrl)
+		removeFile(item.savedVideoUrl)
+	}
+	data.videoData.videoList.splice(index, 1)
+}
+
+// 触摸开始 - 启动长按检测
+const handleTouchStart = (event, index) => {
+	const touch = event.touches[0]
+	data.dragState.startX = touch.clientX
+	data.dragState.startY = touch.clientY
+
+	// 长按300ms后启动拖动模式
+	data.dragState.longPressTimer = setTimeout(() => {
+		data.dragState.isDragging = true
+		data.dragState.draggingIndex = index
+		// 震动反馈（如果支持）
+		// #ifdef APP-PLUS || MP-WEIXIN
+		uni.vibrateShort({ type: 'heavy' })
+		// #endif
+	}, 300)
+}
+
+// 触摸移动 - 实时更新位置偏移
+const handleTouchMove = (event) => {
+	if (!data.dragState.isDragging) return
+
+	const touch = event.touches[0]
+	const deltaX = touch.clientX - data.dragState.startX
+	const deltaY = touch.clientY - data.dragState.startY
+
+	// 更新偏移量，让元素跟随手指移动
+	data.dragState.offsetX = deltaX
+	data.dragState.offsetY = deltaY
+}
+
+// 触摸结束 - 完成拖动并保存
+const handleTouchEnd = () => {
+	// 清除长按定时器
+	if (data.dragState.longPressTimer) {
+		clearTimeout(data.dragState.longPressTimer)
+		data.dragState.longPressTimer = null
+	}
+
+	// 如果发生了拖动，计算最终位置并交换
+	if (data.dragState.isDragging) {
+		const deltaX = data.dragState.offsetX
+		const deltaY = data.dragState.offsetY
+
+		// 计算目标索引
+		const cols = getGridCols()
+		const gridSize = getGridSize()
+
+		console.log('🔍 拖动结束 - cols:', cols, 'gridSize:', gridSize, 'deltaX:', deltaX, 'deltaY:', deltaY)
+
+		const moveX = Math.round(deltaX / gridSize)
+		const moveY = Math.round(deltaY / gridSize)
+
+		console.log('🔍 移动格数 - moveX:', moveX, 'moveY:', moveY)
+
+		const currentRow = Math.floor(data.dragState.draggingIndex / cols)
+		const currentCol = data.dragState.draggingIndex % cols
+
+		const targetRow = currentRow + moveY
+		const targetCol = currentCol + moveX
+
+		console.log('🔍 位置计算 - 当前:', `(${currentRow},${currentCol})`, '目标:', `(${targetRow},${targetCol})`)
+
+		if (targetCol >= 0 && targetCol < cols && targetRow >= 0) {
+			const targetIndex = targetRow * cols + targetCol
+
+			console.log('🔍 索引计算 - draggingIndex:', data.dragState.draggingIndex, 'targetIndex:', targetIndex, 'listLength:', videoData.value.videoList.length)
+
+			if (targetIndex >= 0 && targetIndex < videoData.value.videoList.length && targetIndex !== data.dragState.draggingIndex) {
+				// 交换数组元素
+				const list = videoData.value.videoList
+				const temp = list[data.dragState.draggingIndex]
+				list[data.dragState.draggingIndex] = list[targetIndex]
+				list[targetIndex] = temp
+
+				// 判断是否涉及最后一个元素的交换
+				const lastIndex = list.length - 1
+				if (data.dragState.draggingIndex === lastIndex || targetIndex === lastIndex) {
+					// 确保最后一个位置是 iconType 1，其他位置是 iconType 0
+					// list[lastIndex].iconType = 1
+					// 另一个交换的位置设为 0
+					const otherIndex = data.dragState.draggingIndex === lastIndex ? targetIndex : data.dragState.draggingIndex
+					if (list[otherIndex].iconType == 1) {
+						list[otherIndex].iconType = 0
+					}
+				}
+
+				// 保存到本地存储
+				uni.setStorageSync('videoChatData', data.videoData)
+
+				console.log('✅ 交换成功！')
+			} else {
+				console.log('❌ 目标索引无效，不交换 - 原因:', targetIndex < 0 ? '索引<0' : targetIndex >= videoData.value.videoList.length ? '索引超出' : '索引相同')
+			}
+		} else {
+			console.log('❌ 目标位置超出范围，不交换 - targetCol:', targetCol, 'targetRow:', targetRow)
+		}
+	}
+
+	// 重置拖动状态
+	data.dragState.isDragging = false
+	data.dragState.draggingIndex = -1
+	data.dragState.offsetX = 0
+	data.dragState.offsetY = 0
+}
+
+const hangup = () => {
+	uni.navigateBack()
+}
+
+// 开始计时
+const startTimer = () => {
+	stopTimer()
+	timingTimer = setInterval(() => {
+		if (!data.timing) return
+		let timeStr = String(data.timing)
+		if (timeStr.indexOf(':') === -1) return
+
+		let parts = timeStr.split(':')
+		let minutes = parseInt(parts[0]) || 0
+		let seconds = parseInt(parts[1]) || 0
+
+		seconds++
+		if (seconds >= 60) {
+			seconds = 0
+			minutes++
+		}
+
+		data.timing = `${minutes}:${seconds.toString().padStart(2, '0')}`
+	}, 1000)
+}
+
+// 停止计时
+const stopTimer = () => {
+	if (timingTimer) {
+		clearInterval(timingTimer)
+		timingTimer = null
+	}
+}
+</script>
+
+<style lang="less" scoped>
+.container {
+	width: 100%;
+	height: 100vh;
+	background-color: #232323;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+}
+
+.nav-content {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	height: 88rpx;
+	padding: 0 16px;
+
+	.icon {
+		width: 60rpx;
+		height: 60rpx;
+		flex-shrink: 0;
+	}
+
+	.left {
+		height: 100%;
+		width: 80px;
+		display: flex;
+		align-items: center;
+	}
+
+	.center {
+		height: 100%;
+		flex: 1;
+		text-align: center;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+
+		.time {
+			font-size: 32rpx;
+			color: #ffffff;
+		}
+	}
+
+	.right {
+		width: 80px;
+		height: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+
+		.button {
+			font-size: 28rpx;
+			color: #ffffff;
+			background-color: #07C160;
+			padding: 10rpx 20rpx;
+			text-align: center;
+			border-radius: 12rpx;
+			white-space: nowrap;
+		}
+	}
+}
+
+/* 视频区域 */
+.video-container {
+	flex: 1;
+	width: calc(100vw - 32rpx);
+	margin: 24rpx 16rpx;
+	margin-bottom: 0;
+
+	.video-grid-2 {
+		margin-top: 200rpx;
+		display: flex;
+		justify-content: center;
+		width: 100%;
+
+		.video-item {
+			width: 50vw;
+			height: 50vw;
+		}
+	}
+
+	.video-grid-3 {
+		display: flex;
+		justify-content: center;
+		align-content: flex-start;
+		width: 100%;
+		flex-wrap: wrap;
+
+		.video-item {
+			width: 50vw;
+			height: 50vw;
+			display: flex;
+		}
+	}
+
+	.video-grid-5 {
+		display: flex;
+		justify-content: flex-start;
+		align-content: flex-start;
+		width: 100%;
+		flex-wrap: wrap;
+
+		.video-item {
+			width: calc(100vw / 3);
+			height: calc(100vw / 3);
+		}
+	}
+
+	.video-item {
+		position: relative;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+
+		.video-preview {
+			width: 100%;
+			height: 100%;
+		}
+
+		.video-overlay {
+			position: absolute;
+			bottom: 8px;
+			left: 8px;
+			width: 26px;
+			height: 26px;
+			border-radius: 50%;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
+
+		.close-btn {
+			position: absolute;
+			top: 8px;
+			right: 8px;
+			width: 40rpx;
+			height: 40rpx;
+			border-radius: 50%;
+			z-index: 999;
+		}
+
+		// 拖动时的样式
+		&.dragging {
+			opacity: 0.7;
+			transform: scale(1.05);
+			z-index: 999;
+			transition: transform 0.2s ease, opacity 0.2s ease;
+		}
+	}
+}
+
+
+
+
+
+.mute-icon {
+	width: 100%;
+	height: 100%;
+}
+
+/* 控制栏 */
+.control-bar {
+	flex-shrink: 0;
+	padding: 40rpx 32rpx 80rpx;
+	background-color: transparent;
+	position: relative;
+	z-index: 9;
+
+	.control-buttons {
+		display: flex;
+		justify-content: space-around;
+		margin-bottom: 30px;
+	}
+
+	.control-item {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 8px;
+	}
+
+	.control-btn {
+		width: 120rpx;
+		height: 120rpx;
+		border-radius: 50%;
+		background-color: #4a4a4a;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		transition: all 0.3s;
+
+		&.active {
+			background-color: #ffffff;
+		}
+	}
+
+	.control-icon {
+		width: 100%·;
+		height: 100%;
+	}
+
+	.control-label {
+		font-size: 12px;
+		color: #FFFFFF;
+	}
+
+	.hangup-btn {
+		width: 120rpx;
+		height: 120rpx;
+		border-radius: 50%;
+		background-color: #ff3b30;
+		margin: 0 auto;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.hangup-icon {
+		width: 100%;
+		height: 100%;
+	}
+}
+
+/* 时间编辑弹窗样式 */
+.popup-overlay {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background-color: rgba(0, 0, 0, 0.7);
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	z-index: 10000;
+}
+
+.popup-content {
+	background-color: #fff;
+	border-radius: 20rpx;
+	width: 600rpx;
+	overflow: hidden;
+}
+
+.popup-header {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	padding: 30rpx 16rpx;
+}
+
+.popup-title {
+	font-size: 32rpx;
+	font-weight: bold;
+	color: #333;
+}
+
+.popup-close {
+	font-size: 60rpx;
+	color: #999;
+	line-height: 1;
+	padding: 0 10rpx;
+}
+
+.popup-body {
+	padding: 20rpx 0;
+	padding-bottom: 40rpx;
+}
+
+.time-edit-row {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 20rpx;
+}
+
+.time-label {
+	font-size: 28rpx;
+	color: #666;
+}
+
+.time-input {
+	width: 120rpx;
+	height: 60rpx;
+	border-radius: 10rpx;
+	text-align: center;
+	font-size: 30rpx;
+	font-weight: 500;
+	color: #333;
+}
+
+.time-separator {
+	font-size: 36rpx;
+	font-weight: 500;
+	color: #333;
+	margin: 0 8px;
+}
+
+.popup-footer {
+	display: flex;
+	border-top: 1rpx solid #eee;
+
+	::v-deep uni-button:after {
+		border: none !important;
+	}
+}
+
+.btn-cancel,
+.btn-save {
+	flex: 1;
+	height: 100rpx;
+	line-height: 100rpx;
+	text-align: center;
+	font-size: 32rpx;
+	border: none;
+	background: none;
+}
+
+.btn-cancel {
+	color: #666;
+	border-right: 1px solid #eee;
+	border-radius: 0;
+}
+
+.btn-save {
+	color: #07C160;
+	font-weight: bold;
+}
+
+/* 底部选项弹窗样式 */
+.action-sheet-overlay {
+	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: flex-end;
+	z-index: 10001;
+}
+
+.action-sheet {
+	width: 100%;
+	background-color: #fff;
+	border-radius: 24rpx 24rpx 0 0;
+	overflow: hidden;
+	animation: slideUp 0.3s ease-out;
+}
+
+@keyframes slideUp {
+	from {
+		transform: translateY(100%);
+	}
+
+	to {
+		transform: translateY(0);
+	}
+}
+
+.action-sheet-item {
+	padding: 32rpx 0;
+	text-align: center;
+	background-color: #fff;
+	cursor: pointer;
+	transition: background-color 0.2s;
+
+	&:active {
+		background-color: #f5f5f5;
+	}
+}
+
+.action-sheet-text {
+	font-size: 32rpx;
+	color: #333;
+}
+
+.action-sheet-cancel {
+	color: #666;
+}
+
+.action-sheet-divider {
+	height: 16rpx;
+	background-color: #f5f5f5;
+}
+
+.bg-2-movable {
+	position: absolute;
+	top: 0;
+	right: 0;
+	width: 188rpx;
+	height: 408rpx;
+	border-radius: 20rpx !important;
+}
+
+.avatar-2 {
+	width: 92rpx;
+	height: 92rpx;
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+}
+
+.avatar-1 {
+	width: 136rpx;
+	height: 136rpx;
+	position: absolute;
+	top: 350rpx;
+	left: 50%;
+	transform: translate(-50%, -50%);
+}
+</style>
diff --git a/pages/other/wx-payment-success/wx-payment-success.vue b/pages/other/wx-payment-success/wx-payment-success.vue
index 4b30c36..5f3551a 100644
--- a/pages/other/wx-payment-success/wx-payment-success.vue
+++ b/pages/other/wx-payment-success/wx-payment-success.vue
@@ -2,18 +2,22 @@
 	<view class="container">
 		<nav-bar bgColor="transparent" :isBack="false">
 			<template v-slot:center>
-				<view class="flex-cneter title-box flex">
+				<view class="flex-cneter title-box flex" style="margin-top: 24rpx;">
 					<image class="wx-logo" src="/static/image/other/payment-success/payment-success.png"></image>
 					<text class="title">支付成功</text>
 				</view>
 			</template>
 		</nav-bar>
 		<view class="content-box flex-column flex-cneter" @click="editPaymentInfo">
+			<image v-if="paymetInfo.userImg" class="user-img" :src="paymetInfo.userImg"></image>
 			<text class="product-name">{{ paymetInfo.productName }}</text>
-			<view class="money flex wx-font-medium">
+			<view class="money flex wx-font-medium" :style="{ 'margin-top': paymetInfo.userImg ? '78rpx' : '46rpx' }">
 				<image class="symbol" src="/static/image/other/payment-success/symbol-yuan.png"></image>{{
 					Number(paymetInfo.money).toFixed(2) }}
 			</view>
+			<image v-if="paymetInfo.isAd" class="ad-img" src="/static/image/other/payment-success/ad-img.png"
+				mode="widthFix">
+			</image>
 		</view>
 		<view class="finish-butn" @click="util.goBack()">完成</view>
 
@@ -21,6 +25,18 @@
 		<uni-popup ref="editPaymentInfoPopup" type="center">
 			<view class="edit-popup">
 				<view class="title">修改支付信息</view>
+				<view class="input-item flex-align-center">
+					<text class="label">用户头像</text>
+					<view class="avatar-uploader flex-1">
+						<view class="avatar-preview" v-if="paymetInfo.userImg">
+							<image class="preview-img" :src="paymetInfo.userImg" mode="aspectFill"></image>
+							<view class="delete-icon" @click="handleDeleteAvatar">×</view>
+						</view>
+						<view class="upload-btn" v-else @click="handleChooseAvatar">
+							<text class="plus">+</text>
+						</view>
+					</view>
+				</view>
 				<view class="input-item flex-align-center">
 					<text class="label"><text style="color: #FF3B30;">*</text>商品名称</text>
 					<input class="flex-1" type="text" v-model="paymetInfo.productName" placeholder="请输入商品名称" />
@@ -29,6 +45,11 @@
 					<text class="label"><text style="color: #FF3B30;">*</text>支付金额</text>
 					<input class="flex-1" type="digit" v-model="paymetInfo.money" placeholder="请输入支付金额" />
 				</view>
+				<view class="input-item flex-align-center">
+					<text class="label">展示广告</text>
+					<switch class="flex-1" :checked="paymetInfo.isAd" @change="paymetInfo.isAd = $event.detail.value"
+						color="#16B264" style="transform:scale(0.8);transform-origin:left center;" />
+				</view>
 				<view class="btn-group flex">
 					<view class="btn cancel flex-1" @click="editPaymentInfoPopup.close()">取消</view>
 					<view style="width: 30rpx;"></view>
@@ -64,6 +85,38 @@ const editPaymentInfo = () => {
 	editPaymentInfoPopup.value.open('center');
 }
 
+const handleChooseAvatar = () => {
+	uni.chooseImage({
+		count: 1,
+		success: (res) => {
+			const tempFilePath = res.tempFilePaths[0];
+			// #ifndef H5
+			uni.saveFile({
+				tempFilePath: tempFilePath,
+				success: (saveRes) => {
+					if (paymetInfo.value.userImg && !paymetInfo.value.userImg.startsWith('/static/')) {
+						uni.removeSavedFile({ filePath: paymetInfo.value.userImg });
+					}
+					paymetInfo.value.userImg = saveRes.savedFilePath;
+				}
+			});
+			// #endif
+			// #ifdef H5
+			paymetInfo.value.userImg = tempFilePath;
+			// #endif
+		}
+	});
+};
+
+const handleDeleteAvatar = () => {
+	// #ifndef H5
+	if (paymetInfo.value.userImg && !paymetInfo.value.userImg.startsWith('/static/')) {
+		uni.removeSavedFile({ filePath: paymetInfo.value.userImg });
+	}
+	// #endif
+	paymetInfo.value.userImg = '';
+};
+
 const confirmEditPaymentInfo = () => {
 	editPaymentInfoPopup.value.close();
 	storage.set('wx_payment_success_info', paymetInfo.value);
@@ -80,8 +133,10 @@ const buttonGroup = [
 
 
 const paymetInfo = ref({
+	userImg: '',
 	productName: '王者荣耀',
-	money: 298
+	money: 298,
+	isAd: false,
 });
 
 onShow(() => {
@@ -95,7 +150,7 @@ onShow(() => {
 	// #ifdef APP-PLUS&&!APP-HARMONY
 	util.setAndroidSystemBarColor('#FFFFFF')
 	setTimeout(() => {
-		plus.navigator.setStatusBarStyle("light");
+		plus.navigator.setStatusBarStyle("dark");
 	}, 500)
 	// #endif
 })
@@ -131,6 +186,15 @@ onLoad(async () => {
 
 .content-box {
 	margin-top: 162rpx;
+	align-items: center;
+
+	.user-img {
+		width: 94rpx;
+		height: 94rpx;
+		border-radius: 50%;
+		background-color: #D8D8D8;
+		transform: translateY(-50%);
+	}
 
 	.product-name {
 		font-size: 32rpx;
@@ -154,6 +218,11 @@ onLoad(async () => {
 			margin-right: 20rpx;
 		}
 	}
+
+	.ad-img {
+		margin-top: 100rpx;
+		width: 654rpx;
+	}
 }
 
 .finish-butn {
@@ -207,6 +276,57 @@ onLoad(async () => {
 			font-size: 28rpx;
 			color: #1A1A1A;
 		}
+
+		.avatar-uploader {
+			display: flex;
+			align-items: center;
+
+			.upload-btn {
+				width: 100rpx;
+				height: 100rpx;
+				border-radius: 50%;
+				background-color: #F8F8F8;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				border: 2rpx dashed #CCCCCC;
+
+				.plus {
+					font-size: 60rpx;
+					color: #999;
+					font-weight: 300;
+					margin-top: -6rpx;
+				}
+			}
+
+			.avatar-preview {
+				position: relative;
+				width: 100rpx;
+				height: 100rpx;
+
+				.preview-img {
+					width: 100%;
+					height: 100%;
+					border-radius: 50%;
+				}
+
+				.delete-icon {
+					position: absolute;
+					top: -4rpx;
+					right: -4rpx;
+					width: 32rpx;
+					height: 32rpx;
+					background-color: red;
+					color: #fff;
+					border-radius: 50%;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					font-size: 30rpx;
+					line-height: 28rpx;
+				}
+			}
+		}
 	}
 
 	.btn-group {
diff --git a/static/font/iconfont.ttf b/static/font/iconfont.ttf
new file mode 100644
index 0000000..e3f27fc
Binary files /dev/null and b/static/font/iconfont.ttf differ
diff --git a/static/image/other/game/hepingjingying.png b/static/image/other/game/hepingjingying.png
new file mode 100644
index 0000000..a2b4968
Binary files /dev/null and b/static/image/other/game/hepingjingying.png differ
diff --git a/static/image/other/game/sanjiaozhou.png b/static/image/other/game/sanjiaozhou.png
new file mode 100644
index 0000000..cf7f684
Binary files /dev/null and b/static/image/other/game/sanjiaozhou.png differ
diff --git a/static/image/other/game/sanjiaozhou/kill.png b/static/image/other/game/sanjiaozhou/kill.png
new file mode 100644
index 0000000..2a26277
Binary files /dev/null and b/static/image/other/game/sanjiaozhou/kill.png differ
diff --git a/static/image/other/game/sanjiaozhou/line.png b/static/image/other/game/sanjiaozhou/line.png
new file mode 100644
index 0000000..f6d06fa
Binary files /dev/null and b/static/image/other/game/sanjiaozhou/line.png differ
diff --git a/static/image/other/game/sanjiaozhou/style-1.jpg b/static/image/other/game/sanjiaozhou/style-1.jpg
new file mode 100644
index 0000000..9271185
Binary files /dev/null and b/static/image/other/game/sanjiaozhou/style-1.jpg differ
diff --git a/static/image/other/game/sanjiaozhou/style-2.jpg b/static/image/other/game/sanjiaozhou/style-2.jpg
new file mode 100644
index 0000000..921aef9
Binary files /dev/null and b/static/image/other/game/sanjiaozhou/style-2.jpg differ
diff --git a/static/image/other/game/sanjiaozhou/style-3.jpg b/static/image/other/game/sanjiaozhou/style-3.jpg
new file mode 100644
index 0000000..4832eb6
Binary files /dev/null and b/static/image/other/game/sanjiaozhou/style-3.jpg differ
diff --git a/static/image/other/game/sanjiaozhou/style-4.jpg b/static/image/other/game/sanjiaozhou/style-4.jpg
new file mode 100644
index 0000000..0f06259
Binary files /dev/null and b/static/image/other/game/sanjiaozhou/style-4.jpg differ
diff --git a/static/image/other/game/wangzhe.png b/static/image/other/game/wangzhe.png
new file mode 100644
index 0000000..38b98be
Binary files /dev/null and b/static/image/other/game/wangzhe.png differ
diff --git a/static/image/other/game/wuweiqiyue.png b/static/image/other/game/wuweiqiyue.png
new file mode 100644
index 0000000..26892cf
Binary files /dev/null and b/static/image/other/game/wuweiqiyue.png differ
diff --git a/static/image/other/payment-success/ad-img.png b/static/image/other/payment-success/ad-img.png
new file mode 100644
index 0000000..a49501c
Binary files /dev/null and b/static/image/other/payment-success/ad-img.png differ
diff --git a/static/image/other/video-call/add-user.png b/static/image/other/video-call/add-user.png
new file mode 100644
index 0000000..4e4a470
Binary files /dev/null and b/static/image/other/video-call/add-user.png differ
diff --git a/static/image/other/video-call/suoding.png b/static/image/other/video-call/suoding.png
new file mode 100644
index 0000000..794c318
Binary files /dev/null and b/static/image/other/video-call/suoding.png differ
diff --git a/static/image/other/video-call/xuanfu.png b/static/image/other/video-call/xuanfu.png
new file mode 100644
index 0000000..4d112ca
Binary files /dev/null and b/static/image/other/video-call/xuanfu.png differ
diff --git a/static/image/other/video-call/xuanzhuan.png b/static/image/other/video-call/xuanzhuan.png
new file mode 100644
index 0000000..ddf2e50
Binary files /dev/null and b/static/image/other/video-call/xuanzhuan.png differ
diff --git a/static/image/other/video-call/xvnibeijing.png b/static/image/other/video-call/xvnibeijing.png
new file mode 100644
index 0000000..c5b0a37
Binary files /dev/null and b/static/image/other/video-call/xvnibeijing.png differ