1054425342@qq.com
2 months ago
4 changed files with 417 additions and 169 deletions
@ -0,0 +1,275 @@ |
|||||
|
<template> |
||||
|
<uni-popup ref="popup" type="bottom" :mask-click="false"> |
||||
|
<view class="activate-agent-popup"> |
||||
|
<!-- 弹窗头部 --> |
||||
|
<view class="popup-header"> |
||||
|
<text class="popup-title">激活AGENT</text> |
||||
|
<text class="popup-close" @click="closePopup">×</text> |
||||
|
</view> |
||||
|
|
||||
|
<!-- AGENT列表 --> |
||||
|
<view class="agent-list"> |
||||
|
<view |
||||
|
class="agent-item" |
||||
|
v-for="(agent, index) in agentList" |
||||
|
:key="index" |
||||
|
@click="handleAgentClick(agent)" |
||||
|
> |
||||
|
<!-- 头像区域 --> |
||||
|
<view class="agent-avatar"> |
||||
|
<view class="avatar-bubble"> |
||||
|
<image |
||||
|
:src="agent.avatar" |
||||
|
mode="aspectFill" |
||||
|
class="avatar-img" |
||||
|
></image> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 信息区域 --> |
||||
|
<view class="agent-info"> |
||||
|
<view class="agent-name"> |
||||
|
<text class="name-chinese">{{ agent.nameChinese }}</text> |
||||
|
<text class="name-pinyin">{{ agent.namePinyin }}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 状态按钮 --> |
||||
|
<view class="agent-status"> |
||||
|
<view |
||||
|
class="status-btn" |
||||
|
:class=" |
||||
|
agent.status === '待激活' ? 'status-inactive' : 'status-active' |
||||
|
" |
||||
|
> |
||||
|
<text class="status-text">{{ agent.status }}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</uni-popup> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: "ActivateAgentPopup", |
||||
|
data() { |
||||
|
return { |
||||
|
agentList: [ |
||||
|
{ |
||||
|
id: 1, |
||||
|
avatar: |
||||
|
"https://epic.js-dyyj.com/uploads/20250728/d27ef6e6c26877da7775664fed376c6f.png", |
||||
|
nameChinese: "颜真卿", |
||||
|
namePinyin: "YAN ZHENQING", |
||||
|
status: "待激活", |
||||
|
}, |
||||
|
{ |
||||
|
id: 2, |
||||
|
avatar: |
||||
|
"https://epic.js-dyyj.com/uploads/20250728/d7bf0dd2f3f272afba687b525a7c575c.png", |
||||
|
nameChinese: "杜丽娘", |
||||
|
namePinyin: "DU LINNIANG", |
||||
|
status: "去使用", |
||||
|
}, |
||||
|
{ |
||||
|
id: 3, |
||||
|
avatar: |
||||
|
"https://epic.js-dyyj.com/uploads/20250728/d27ef6e6c26877da7775664fed376c6f.png", |
||||
|
nameChinese: "文徵明", |
||||
|
namePinyin: "WEN ZHENGMING", |
||||
|
status: "去使用", |
||||
|
}, |
||||
|
{ |
||||
|
id: 4, |
||||
|
avatar: |
||||
|
"https://epic.js-dyyj.com/uploads/20250728/d7bf0dd2f3f272afba687b525a7c575c.png", |
||||
|
nameChinese: "朵朵", |
||||
|
namePinyin: "DUODUO", |
||||
|
status: "去使用", |
||||
|
}, |
||||
|
], |
||||
|
}; |
||||
|
}, |
||||
|
methods: { |
||||
|
// 打开弹窗 |
||||
|
openPopup() { |
||||
|
this.$refs.popup.open(); |
||||
|
}, |
||||
|
|
||||
|
// 关闭弹窗 |
||||
|
closePopup() { |
||||
|
this.$refs.popup.close(); |
||||
|
}, |
||||
|
|
||||
|
// 处理AGENT点击 |
||||
|
handleAgentClick(agent) { |
||||
|
console.log("点击了AGENT:", agent); |
||||
|
|
||||
|
if (agent.status === "待激活") { |
||||
|
// 激活逻辑 |
||||
|
uni.showToast({ |
||||
|
title: `正在激活${agent.nameChinese}...`, |
||||
|
icon: "loading", |
||||
|
}); |
||||
|
|
||||
|
// 模拟激活过程 |
||||
|
setTimeout(() => { |
||||
|
agent.status = "去使用"; |
||||
|
uni.showToast({ |
||||
|
title: `${agent.nameChinese}激活成功！`, |
||||
|
icon: "success", |
||||
|
}); |
||||
|
}, 2000); |
||||
|
} else { |
||||
|
// 使用逻辑 |
||||
|
uni.showToast({ |
||||
|
title: `正在启动${agent.nameChinese}...`, |
||||
|
icon: "loading", |
||||
|
}); |
||||
|
|
||||
|
// 这里可以添加跳转到具体AGENT页面的逻辑 |
||||
|
setTimeout(() => { |
||||
|
uni.showToast({ |
||||
|
title: `${agent.nameChinese}启动成功！`, |
||||
|
icon: "success", |
||||
|
}); |
||||
|
}, 1500); |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.activate-agent-popup { |
||||
|
background: #ffffff; |
||||
|
border-radius: 24rpx 24rpx 0 0; |
||||
|
padding: 40rpx 30rpx; |
||||
|
max-height: 80vh; |
||||
|
overflow-y: auto; |
||||
|
} |
||||
|
|
||||
|
// 弹窗头部 |
||||
|
.popup-header { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
margin-bottom: 10rpx; |
||||
|
padding-bottom: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.popup-title { |
||||
|
font-size: 36rpx; |
||||
|
font-weight: bold; |
||||
|
color: #000000; |
||||
|
margin: 0 auto; |
||||
|
} |
||||
|
|
||||
|
.popup-close { |
||||
|
font-size: 48rpx; |
||||
|
color: #999999; |
||||
|
padding: 10rpx; |
||||
|
line-height: 1; |
||||
|
} |
||||
|
|
||||
|
// AGENT列表 |
||||
|
.agent-list { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 30rpx; |
||||
|
} |
||||
|
|
||||
|
.agent-item { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
padding: 20rpx; |
||||
|
background: #F1F1F1; |
||||
|
border-radius: 20rpx; |
||||
|
transition: all 0.3s ease; |
||||
|
|
||||
|
&:active { |
||||
|
transform: scale(0.98); |
||||
|
background: #f5f5f5; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 头像区域 |
||||
|
.agent-avatar { |
||||
|
margin-right: 24rpx; |
||||
|
} |
||||
|
|
||||
|
.avatar-bubble { |
||||
|
width: 100rpx; |
||||
|
height: 100rpx; |
||||
|
border-radius: 50%; |
||||
|
|
||||
|
backdrop-filter: blur(10rpx); |
||||
|
border: 2rpx solid rgba(255, 255, 255, 0.2); |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
overflow: hidden; |
||||
|
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1); |
||||
|
} |
||||
|
|
||||
|
.avatar-img { |
||||
|
width: 80rpx; |
||||
|
height: 80rpx; |
||||
|
border-radius: 50%; |
||||
|
} |
||||
|
|
||||
|
// 信息区域 |
||||
|
.agent-info { |
||||
|
flex: 1; |
||||
|
} |
||||
|
|
||||
|
.agent-name { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 4rpx; |
||||
|
} |
||||
|
|
||||
|
.name-chinese { |
||||
|
font-size: 32rpx; |
||||
|
font-weight: bold; |
||||
|
color: #333333; |
||||
|
line-height: 1.2; |
||||
|
} |
||||
|
|
||||
|
.name-pinyin { |
||||
|
font-size: 24rpx; |
||||
|
color: #77f3f9; |
||||
|
font-weight: 500; |
||||
|
line-height: 1.2; |
||||
|
} |
||||
|
|
||||
|
// 状态按钮 |
||||
|
.agent-status { |
||||
|
margin-left: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.status-btn { |
||||
|
padding: 12rpx 24rpx; |
||||
|
border-radius: 20rpx; |
||||
|
min-width: 120rpx; |
||||
|
text-align: center; |
||||
|
transition: all 0.3s ease; |
||||
|
} |
||||
|
|
||||
|
.status-inactive { |
||||
|
background: #354242; |
||||
|
color: #ffffff; |
||||
|
} |
||||
|
|
||||
|
.status-active { |
||||
|
background: linear-gradient(135deg, #fffdb7 0%, #97fffa 100%); |
||||
|
color: #000000; |
||||
|
} |
||||
|
|
||||
|
.status-text { |
||||
|
font-size: 26rpx; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue