AI-app/pages/setting/index.vue

<template>
	<view class="setting-page">
		<uni-nav-bar left-icon="left" @clickLeft="$pageJumb.backJump()" title="设置">
			<template v-slot:left>
				<view></view>
			</template>
			<template v-slot:right>
				<view class="close" @tap="onClose">✕</view>
			</template>
		</uni-nav-bar>

		<view class="group">
			<view class="group-title">账户</view>
			<view class="card">
				<view class="item" @tap="onItem('账号管理')">
					<view class="left">
						<view class="icon-wrap"><uni-icons type="person" size="20" color="#3b3f45" /></view>
						<text class="text">账号管理</text>
					</view>
					<text class="arrow">›</text>
				</view>
				<view class="divider" />
				<view class="item" @tap="onItem('数据管理')">
					<view class="left">
						<view class="icon-wrap">
							<image src="../../static/data-management.png" mode="widthFix" style="width: 18px;"></image>
						</view>
						<text class="text">数据管理</text>
					</view>
					<text class="arrow">›</text>
				</view>
			</view>
		</view>

		<view class="group">
			<view class="group-title">应用</view>
			<view class="card">
				<view class="item" @tap="chatPattern">
					<view class="left">
						<view class="icon-wrap"><uni-icons type="chat" size="20" color="#3b3f45" /></view>
						<text class="text">回复模式</text>
					</view>
					<text class="arrow">›</text>
				</view>
				<view class="divider" />
				<view class="item" @tap="onItem('字体大小')">
					<view class="left">
						<view class="icon-wrap"><uni-icons type="help" size="20" color="#3b3f45" /></view>
						<text class="text">字体大小</text>
					</view>
					<text class="arrow">›</text>
				</view>
			</view>
		</view>

		<view class="group">
			<view class="group-title">关于</view>
			<view class="card">
				<view class="item" @tap="onItem('检查更新')">
					<view class="left">
						<view class="icon-wrap"><uni-icons type="refreshempty" size="20" color="#3b3f45" /></view>
						<text class="text">检查更新</text>
					</view>
					<text class="arrow">›</text>
				</view>
				<view class="divider" />
				<view class="item" @tap="onItem('服务协议')">
					<view class="left">
						<view class="icon-wrap"><uni-icons type="help" size="20" color="#3b3f45" /></view>
						<text class="text">服务协议</text>
					</view>
					<text class="arrow">›</text>
				</view>
			</view>
		</view>

		<view class="card single" style="margin-top: 30px;">
			<view class="item" @tap="onItem('联系我们')">
				<view class="left">
					<view class="icon-wrap"><uni-icons type="phone" size="20" color="#3b3f45" /></view>
					<text class="text">联系我们</text>
				</view>
				<text class="arrow">›</text>
			</view>
		</view>

		<view class="card single">
			<view class="item danger" @tap="onLogout">
				<view class="left">
					<view class="icon-wrap">
						<image src="../../static/quit.png" mode="widthFix" style="width: 16px;"></image>
					</view>
					<text class="text danger">退出登录</text>
				</view>
			</view>
		</view>

		<view class="brand">
			<image src="../../static/cxlogo.png" mode="heightFix" style="height: 40px;"></image>
		</view>

		<uni-popup ref="popup" class="popup" type="center" border-radius="10px 10px 0 0" :is-mask-click="false">
			<view class="chat-box">
				<view class="chat-title"> AI回复模式 </view>
				<radio-group @change="radioChange">
					<label v-for="(item, index) in items" :key="item.value" style="display: flex;margin-bottom: 10px;">
						<view>
							<radio :value="item.value" :checked="item.value === current"  />
						</view>
						<view style="margin-left: 10px;">{{item.label}}</view>
					</label>
				</radio-group>
				<view class="confirm" @tap="confirmPattern">确认</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current : '0',
				items : [{
					label : '文字回复',
					value : '0'
				},{
					label : '语音回复',
					value : '1'
				},{
					label : '文字 + 语音回复',
					value : '2'
				}]
			}
		},
		mounted () {
			this.current = this.$store.state.set.replyPattern;
		},
		methods: {
			onClose() {
				uni.navigateBack();
			},
			onItem(name) {
				uni.showToast({
					title: name,
					icon: 'none'
				})
			},
			onLogout() {
				uni.showModal({
					title: '提示',
					content: '确认退出登录？',
					success: (res) => {
						if (res.confirm) {
							uni.showToast({
								title: '已退出',
								icon: 'none'
							})
						}
					}
				})
			},
			chatPattern() {
				this.$refs.popup.open()
			},
			radioChange(e){
				this.current = e.detail.value;
			},
			confirmPattern(){
				this.$refs.popup.close();
				this.$store.commit('set/SET_REPLY_PATTERN', this.current)
			},
		}
	}
</script>

<style scoped lang="scss">
	.setting-page {
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		background: #eef1f4;
	}

	.header {
		height: 52px;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		background: #eef1f4;
	}

	.title {
		font-size: 16px;
		font-weight: 600;
		color: #333;
	}

	.close {
		width: 28px;
		height: 28px;
		line-height: 28px;
		text-align: center;
		border-radius: 14px;
		background: #ffffff;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
		color: #666;
	}

	.content {
		flex: 1;
		padding: 8px 14px 20px;
	}

	.group {
		width: 80vw;
		margin: 8px auto;
	}

	.group-title {
		font-size: 12px;
		color: #9aa3b2;
		margin: 10px 6px;
	}

	.card {
		width: 80vw;
		margin: 0 auto;
		background: #fff;
		border-radius: 12px;
		padding: 0 12px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
		box-sizing: border-box;
	}

	.card.single {
		margin-top: 12px;
	}

	.item {
		height: 38px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.left {
		display: flex;
		align-items: center;
		gap: 10px;
	}

	.icon-wrap {
		width: 18px;
		height: 18px;
		border-radius: 14px;
		background: #f1f3f6;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.icon-wrap.danger {
		background: #fdecea;
	}

	.text {
		font-size: 14px;
		color: #333;
	}

	.arrow {
		color: #b3bac5;
		font-size: 18px;
	}

	.divider {
		height: 1px;
		background: #eef0f3;
	}

	.brand {
		position: absolute;
		bottom: 20px;
		left: 50%;
		transform: translateX(-50%);
	}

	.popup {
		z-index: 99999;
	}

	.chat-box {
		background-color: #fff;
		width: 70vw;
		border-radius: 10px;
		padding: 0 20px;
		box-sizing: border-box;
		
		::v-deep uni-radio .uni-radio-input{
			width: 16px !important;
			height: 16px !important;
		}
		

		.chat-title {
			text-align: center;
			padding: 10px;
			border-bottom: 1px solid #ddd;
			margin-bottom: 10px;
		}

		.confirm {
			color: #048bff;
			text-align: center;
			padding: 8px;
			border-top: 1px solid #ddd;
		}
	}
	

	
</style>