siyu-bank/cunkebao_v3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

【私域操盘手】 操盘手端UI - 部分页面草图

Browse Source
This commit is contained in:
柳清爽
2025-03-27 11:46:55 +08:00
parent 1790d1719f
commit 80b239c1ea
14 changed files with 5346 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

504
Cunkebao/pages/content/detail.vue Normal file
View File

@@ -0,0 +1,504 @@
<template>
<view class="detail-container">
<!-- 顶部导航栏 -->
<view class="header">
<view class="back-icon" @click="goBack">
<u-icon name="arrow-left" size="42" color="black"></u-icon>
</view>
<view class="title">内容库详情</view>
<view class="header-right">
<view class="save-btn" @click="saveContent">
<u-icon name="checkbox-mark" size="28" color="#fff"></u-icon>
<text class="save-text">保存</text>
</view>
</view>
</view>
<!-- 表单内容 -->
<view class="form-container">
<!-- 内容库名称 -->
<view class="form-item">
<view class="form-label">内容库名称</view>
<view class="form-input-box">
<input type="text" v-model="form.title" placeholder="示例内容库" class="form-input" />
</view>
</view>
<!-- 数据来源配置 -->
<view class="form-item">
<view class="form-label">数据来源配置</view>
<view class="source-buttons">
<view class="source-btn" :class="{ active: form.dataSource === 'friend' }" @click="setDataSource('friend')">
<text>选择微信好友</text>
</view>
<view class="source-btn" :class="{ active: form.dataSource === 'group' }" @click="setDataSource('group')">
<text>选择聊天群</text>
</view>
</view>
<!-- 当选择微信好友时显示 -->
<view class="friend-list-box" v-if="form.dataSource === 'friend'">
<view class="friend-select-btn" @click="showFriendSelector">
<text>选择微信好友</text>
</view>
<view class="selected-friends" v-if="form.selectedFriends.length > 0">
<view class="friend-tag" v-for="(friend, index) in form.selectedFriends" :key="index">
<text>{{friend.name || friend}}</text>
</view>
</view>
</view>
<!-- 当选择聊天群时显示 -->
<view class="group-list-box" v-if="form.dataSource === 'group'">
<view class="group-select-btn" @click="showGroupSelector">
<text>选择聊天群</text>
</view>
<view class="selected-groups" v-if="form.selectedGroups.length > 0">
<view class="group-tag" v-for="(group, index) in form.selectedGroups" :key="index">
<text>{{group.name || group}}</text>
</view>
</view>
</view>
</view>
<!-- 关键字设置 -->
<view class="form-item">
<view class="form-label">
<text>关键字设置</text>
<u-icon name="arrow-down" size="28" color="#666" @click="toggleKeywordSection"></u-icon>
</view>
</view>
<!-- 是否启用AI -->
<view class="form-item">
<view class="form-label-with-desc">
<view class="label-row">
<text>是否启用AI</text>
<u-switch v-model="form.enableAI" activeColor="#4080ff"></u-switch>
</view>
<view class="label-desc">
<text>当启用AI之后，该内容库下的所有内容，都会通过AI重新生成内容。</text>
</view>
</view>
</view>
<!-- AI提示词 -->
<view class="form-item" v-if="form.enableAI">
<view class="form-label">AI 提示词</view>
<view class="form-textarea-box">
<textarea v-model="form.aiPrompt" placeholder="AI提示词示例" class="form-textarea" />
</view>
</view>
<!-- 时间限制 -->
<view class="form-item">
<view class="form-label">时间限制</view>
<view class="form-date-box" @click="showDatePicker">
<u-icon name="calendar" size="28" color="#666"></u-icon>
<text class="date-text">{{form.dateRange || '选择日期范围'}}</text>
</view>
</view>
<!-- 是否启用 -->
<view class="form-item">
<view class="form-label-with-switch">
<text>是否启用</text>
<u-switch v-model="form.isEnabled" activeColor="#4080ff"></u-switch>
</view>
</view>
</view>
<!-- 底部导航栏 -->
<CustomTabBar active="work"></CustomTabBar>
<!-- 微信好友选择器 -->
<FriendSelector
:show="showFriendSelectorFlag"
:selected="selectedFriendIds"
:multiple="true"
@update:show="showFriendSelectorFlag = $event"
@confirm="handleFriendConfirm"
@cancel="showFriendSelectorFlag = false"
/>
<!-- 聊天群选择器 -->
<GroupSelector
:show="showGroupSelectorFlag"
:selected="selectedGroupIds"
:multiple="true"
@update:show="showGroupSelectorFlag = $event"
@confirm="handleGroupConfirm"
@cancel="showGroupSelectorFlag = false"
/>
</view>
</template>
<script>
import CustomTabBar from '@/components/CustomTabBar.vue'
import FriendSelector from './components/FriendSelector.vue'
import GroupSelector from './components/GroupSelector.vue'
export default {
components: {
CustomTabBar,
FriendSelector,
GroupSelector
},
data() {
return {
id: '', // 编辑时的内容库ID
form: {
title: '', // 内容库名称
dataSource: 'friend', // 数据来源: friend-微信好友, group-聊天群
selectedFriends: [], // 已选择的好友
selectedGroups: [], // 已选择的群组
enableAI: true, // 是否启用AI
aiPrompt: 'AI提示词示例', // AI提示词
isKeywordExpanded: false, // 关键字设置是否展开
dateRange: '', // 时间限制
isEnabled: true // 是否启用
},
isEdit: false, // 是否为编辑模式
showFriendSelectorFlag: false, // 是否显示好友选择器
showGroupSelectorFlag: false, // 是否显示群组选择器
}
},
computed: {
// 获取已选择的好友ID列表
selectedFriendIds() {
return this.form.selectedFriends.map(friend => {
return typeof friend === 'object' ? friend.id : friend;
});
},
// 获取已选择的群组ID列表
selectedGroupIds() {
return this.form.selectedGroups.map(group => {
return typeof group === 'object' ? group.id : group;
});
}
},
onLoad(options) {
if (options.id) {
this.id = options.id;
this.isEdit = true;
this.loadContentDetail();
}
},
methods: {
// 返回上一页
goBack() {
uni.navigateBack();
},
// 设置数据来源
setDataSource(source) {
this.form.dataSource = source;
},
// 显示好友选择器
showFriendSelector() {
this.showFriendSelectorFlag = true;
},
// 显示群组选择器
showGroupSelector() {
this.showGroupSelectorFlag = true;
},
// 处理好友选择确认
handleFriendConfirm(selectedFriends) {
this.form.selectedFriends = selectedFriends;
},
// 处理群组选择确认
handleGroupConfirm(selectedGroups) {
this.form.selectedGroups = selectedGroups;
},
// 切换关键字设置区域
toggleKeywordSection() {
this.form.isKeywordExpanded = !this.form.isKeywordExpanded;
},
// 显示日期选择器
showDatePicker() {
// 这里应该调用日期选择器组件
uni.showToast({
title: '日期选择功能开发中',
icon: 'none'
});
},
// 保存内容库
saveContent() {
// 表单验证
if (!this.form.title) {
uni.showToast({
title: '请输入内容库名称',
icon: 'none'
});
return;
}
// 验证是否选择了数据来源
if (this.form.dataSource === 'friend' && this.form.selectedFriends.length === 0) {
uni.showToast({
title: '请选择微信好友',
icon: 'none'
});
return;
}
if (this.form.dataSource === 'group' && this.form.selectedGroups.length === 0) {
uni.showToast({
title: '请选择聊天群',
icon: 'none'
});
return;
}
// 在实际应用中，这里应该提交表单数据到服务器
uni.showLoading({
title: '保存中...'
});
// 模拟API请求
setTimeout(() => {
uni.hideLoading();
uni.showToast({
title: '保存成功',
icon: 'success'
});
// 返回上一页
setTimeout(() => {
uni.navigateBack();
}, 1500);
}, 1000);
},
// 加载内容库详情数据
loadContentDetail() {
// 在实际应用中，这里应该从服务器获取内容库详情
console.log('加载内容库详情:', this.id);
// 模拟数据加载
if (this.isEdit) {
// 模拟已有数据
this.form = {
title: '示例内容库',
dataSource: 'friend',
selectedFriends: ['张三', '李四'],
selectedGroups: [],
enableAI: true,
aiPrompt: 'AI提示词示例',
isKeywordExpanded: false,
dateRange: '',
isEnabled: true
};
}
}
}
}
</script>
<style lang="scss" scoped>
.detail-container {
min-height: 100vh;
background-color: #f9fafb;
padding-bottom: 150rpx; /* 为底部导航栏预留空间 */
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 25rpx 30rpx;
background-color: #fff;
border-bottom: 1px solid #f0f0f0;
.back-icon {
width: 60rpx;
color: #000;
padding: 10rpx;
border-radius: 50%;
&:active {
background-color: rgba(0, 0, 0, 0.05);
}
}
.title {
font-size: 38rpx;
font-weight: 600;
margin-left: -60rpx; /* 使标题居中 */
flex: 1;
text-align: center;
}
.header-right {
.save-btn {
display: flex;
align-items: center;
justify-content: center;
background-color: #4080ff;
border-radius: 30rpx;
padding: 12rpx 24rpx;
color: #fff;
.save-text {
font-size: 28rpx;
}
}
}
}
.form-container {
padding: 20rpx 30rpx;
.form-item {
background-color: #fff;
border-radius: 16rpx;
padding: 24rpx;
margin-bottom: 20rpx;
.form-label {
font-size: 30rpx;
font-weight: 500;
color: #333;
margin-bottom: 20rpx;
display: flex;
justify-content: space-between;
align-items: center;
}
.form-label-with-desc {
.label-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 30rpx;
font-weight: 500;
color: #333;
margin-bottom: 10rpx;
}
.label-desc {
font-size: 24rpx;
color: #999;
line-height: 1.4;
}
}
.form-label-with-switch {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 30rpx;
font-weight: 500;
color: #333;
}
.form-input-box {
.form-input {
width: 100%;
height: 80rpx;
background-color: #f5f5f5;
border-radius: 8rpx;
padding: 0 20rpx;
font-size: 28rpx;
}
}
.form-textarea-box {
.form-textarea {
width: 100%;
height: 200rpx;
background-color: #f5f5f5;
border-radius: 8rpx;
padding: 20rpx;
font-size: 28rpx;
}
}
.source-buttons {
display: flex;
margin-bottom: 20rpx;
.source-btn {
flex: 1;
height: 80rpx;
display: flex;
align-items: center;
justify-content: center;
background-color: #f5f5f5;
font-size: 28rpx;
color: #666;
&:first-child {
border-top-left-radius: 8rpx;
border-bottom-left-radius: 8rpx;
border-right: 1px solid #e0e0e0;
}
&:last-child {
border-top-right-radius: 8rpx;
border-bottom-right-radius: 8rpx;
}
&.active {
background-color: #e6f7ff;
color: #4080ff;
font-weight: 500;
}
}
}
.friend-list-box, .group-list-box {
.friend-select-btn, .group-select-btn {
width: 100%;
height: 80rpx;
display: flex;
align-items: center;
justify-content: center;
background-color: #f5f5f5;
border-radius: 8rpx;
font-size: 28rpx;
color: #666;
margin-bottom: 20rpx;
}
.selected-friends, .selected-groups {
display: flex;
flex-wrap: wrap;
.friend-tag, .group-tag {
background-color: #f5f5f5;
border-radius: 30rpx;
padding: 10rpx 20rpx;
margin-right: 15rpx;
margin-bottom: 15rpx;
font-size: 26rpx;
color: #666;
}
}
}
.form-date-box {
width: 100%;
height: 80rpx;
display: flex;
align-items: center;
background-color: #f5f5f5;
border-radius: 8rpx;
padding: 0 20rpx;
.date-text {
margin-left: 10rpx;
font-size: 28rpx;
color: #999;
}
}
}
}
</style>