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