You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

321 lines
6.7 KiB
Vue

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<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'
}]
}
},
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>