【私域操盘手】 操盘手端UI - 部分页面草图
This commit is contained in:
柳清爽
325
Cunkebao/pages/content/components/FriendSelector.vue
Normal file
325
Cunkebao/pages/content/components/FriendSelector.vue
Normal file
@@ -0,0 +1,325 @@
|
||||
<template>
|
||||
<u-popup
|
||||
:show="show"
|
||||
@close="onClose"
|
||||
mode="bottom"
|
||||
:safeAreaInsetBottom="true"
|
||||
:round="10"
|
||||
:closeable="true"
|
||||
closeIconPos="top-right"
|
||||
closeIconColor="#999"
|
||||
:maskCloseAble="true"
|
||||
height="85%"
|
||||
>
|
||||
<view class="friend-selector">
|
||||
<!-- 标题栏 -->
|
||||
<view class="selector-header">
|
||||
<text class="selector-title">选择微信好友</text>
|
||||
<view class="close-icon" @click="onClose">
|
||||
<u-icon name="close" size="28" color="#999"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 搜索框 -->
|
||||
<view class="search-box">
|
||||
<u-search
|
||||
v-model="searchKeyword"
|
||||
placeholder="搜索好友"
|
||||
:showAction="false"
|
||||
clearabled
|
||||
shape="round"
|
||||
:clearabled="true"
|
||||
height="70"
|
||||
bgColor="#f4f4f4"
|
||||
></u-search>
|
||||
</view>
|
||||
|
||||
<!-- 好友列表 -->
|
||||
<scroll-view scroll-y class="friend-list">
|
||||
<view
|
||||
class="friend-item"
|
||||
v-for="(friend, index) in filteredFriends"
|
||||
:key="index"
|
||||
@click="toggleSelect(friend)"
|
||||
>
|
||||
<view class="friend-checkbox">
|
||||
<u-radio
|
||||
:name="friend.id"
|
||||
v-model="friend.selected"
|
||||
:disabled="disabled"
|
||||
@change="() => toggleSelect(friend)"
|
||||
shape="circle"
|
||||
activeColor="#4080ff"
|
||||
></u-radio>
|
||||
</view>
|
||||
<view class="friend-avatar">
|
||||
<image :src="friend.avatar || '/static/images/avatar.png'" mode="aspectFill" class="avatar-img"></image>
|
||||
</view>
|
||||
<view class="friend-info">
|
||||
<view class="friend-name">{{friend.name}}</view>
|
||||
<view class="friend-id">{{friend.wechatId}}</view>
|
||||
<view class="friend-client">归属客户：{{friend.client}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 底部按钮 -->
|
||||
<view class="action-buttons">
|
||||
<view class="cancel-btn" @click="onCancel">取消</view>
|
||||
<view class="confirm-btn" @click="onConfirm">确定</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'FriendSelector',
|
||||
props: {
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
selected: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
searchKeyword: '',
|
||||
friends: [
|
||||
{
|
||||
id: '1',
|
||||
name: '好友1',
|
||||
wechatId: 'wxid_0y06hq00',
|
||||
client: '客户1',
|
||||
avatar: '/static/images/avatar.png',
|
||||
selected: false
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: '好友2',
|
||||
wechatId: 'wxid_mt5oz9fz',
|
||||
client: '客户2',
|
||||
avatar: '/static/images/avatar.png',
|
||||
selected: false
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: '好友3',
|
||||
wechatId: 'wxid_bma8xfh8',
|
||||
client: '客户3',
|
||||
avatar: '/static/images/avatar.png',
|
||||
selected: false
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
name: '好友4',
|
||||
wechatId: 'wxid_9xazw62h',
|
||||
client: '客户4',
|
||||
avatar: '/static/images/avatar.png',
|
||||
selected: false
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
name: '好友5',
|
||||
wechatId: 'wxid_v1fv02q3',
|
||||
avatar: '/static/images/avatar.png',
|
||||
selected: false
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
filteredFriends() {
|
||||
if (!this.searchKeyword) {
|
||||
return this.friends;
|
||||
}
|
||||
|
||||
return this.friends.filter(friend =>
|
||||
friend.name.includes(this.searchKeyword) ||
|
||||
friend.wechatId.includes(this.searchKeyword) ||
|
||||
(friend.client && friend.client.includes(this.searchKeyword))
|
||||
);
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
show(newVal) {
|
||||
if (newVal) {
|
||||
this.initSelection();
|
||||
}
|
||||
},
|
||||
selected: {
|
||||
handler: function(newVal) {
|
||||
this.initSelection();
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 初始化选择状态
|
||||
initSelection() {
|
||||
this.friends.forEach(friend => {
|
||||
friend.selected = this.selected.includes(friend.id);
|
||||
});
|
||||
},
|
||||
|
||||
// 切换选择状态
|
||||
toggleSelect(friend) {
|
||||
if (this.disabled) return;
|
||||
|
||||
if (!this.multiple) {
|
||||
// 单选模式
|
||||
this.friends.forEach(item => {
|
||||
item.selected = item.id === friend.id;
|
||||
});
|
||||
} else {
|
||||
// 多选模式
|
||||
friend.selected = !friend.selected;
|
||||
}
|
||||
},
|
||||
|
||||
// 取消按钮
|
||||
onCancel() {
|
||||
this.$emit('cancel');
|
||||
this.$emit('update:show', false);
|
||||
},
|
||||
|
||||
// 确定按钮
|
||||
onConfirm() {
|
||||
const selectedFriends = this.friends.filter(friend => friend.selected);
|
||||
this.$emit('confirm', selectedFriends);
|
||||
this.$emit('update:show', false);
|
||||
},
|
||||
|
||||
// 关闭弹窗
|
||||
onClose() {
|
||||
this.$emit('cancel');
|
||||
this.$emit('update:show', false);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.friend-selector {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
|
||||
.selector-header {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 30rpx;
|
||||
position: relative;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
|
||||
.selector-title {
|
||||
font-size: 34rpx;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.close-icon {
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
top: 30rpx;
|
||||
padding: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.search-box {
|
||||
padding: 20rpx 30rpx;
|
||||
}
|
||||
|
||||
.friend-list {
|
||||
flex: 1;
|
||||
padding: 0 30rpx;
|
||||
overflow-y: auto;
|
||||
|
||||
.friend-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20rpx 0;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
|
||||
.friend-checkbox {
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.friend-avatar {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
margin-right: 20rpx;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
background-color: #f5f5f5;
|
||||
|
||||
.avatar-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.friend-info {
|
||||
flex: 1;
|
||||
|
||||
.friend-name {
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
margin-bottom: 4rpx;
|
||||
}
|
||||
|
||||
.friend-id {
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
margin-bottom: 4rpx;
|
||||
}
|
||||
|
||||
.friend-client {
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
padding: 20rpx 30rpx;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
|
||||
.cancel-btn, .confirm-btn {
|
||||
flex: 1;
|
||||
height: 80rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 40rpx;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
background-color: #f5f5f5;
|
||||
color: #666;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.confirm-btn {
|
||||
background-color: #4080ff;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
325
Cunkebao/pages/content/components/GroupSelector.vue
Normal file
325
Cunkebao/pages/content/components/GroupSelector.vue
Normal file
@@ -0,0 +1,325 @@
|
||||
<template>
|
||||
<u-popup
|
||||
:show="show"
|
||||
@close="onClose"
|
||||
mode="bottom"
|
||||
:safeAreaInsetBottom="true"
|
||||
:round="10"
|
||||
:closeable="true"
|
||||
closeIconPos="top-right"
|
||||
closeIconColor="#999"
|
||||
:maskCloseAble="true"
|
||||
height="85%"
|
||||
>
|
||||
<view class="group-selector">
|
||||
<!-- 标题栏 -->
|
||||
<view class="selector-header">
|
||||
<text class="selector-title">选择聊天群</text>
|
||||
<view class="close-icon" @click="onClose">
|
||||
<u-icon name="close" size="28" color="#999"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 搜索框 -->
|
||||
<view class="search-box">
|
||||
<u-search
|
||||
v-model="searchKeyword"
|
||||
placeholder="搜索聊天群"
|
||||
:showAction="false"
|
||||
clearabled
|
||||
shape="round"
|
||||
:clearabled="true"
|
||||
height="70"
|
||||
bgColor="#f4f4f4"
|
||||
></u-search>
|
||||
</view>
|
||||
|
||||
<!-- 群列表 -->
|
||||
<scroll-view scroll-y class="group-list">
|
||||
<view
|
||||
class="group-item"
|
||||
v-for="(group, index) in filteredGroups"
|
||||
:key="index"
|
||||
@click="toggleSelect(group)"
|
||||
>
|
||||
<view class="group-checkbox">
|
||||
<u-radio
|
||||
:name="group.id"
|
||||
v-model="group.selected"
|
||||
:disabled="disabled"
|
||||
@change="() => toggleSelect(group)"
|
||||
shape="circle"
|
||||
activeColor="#4080ff"
|
||||
></u-radio>
|
||||
</view>
|
||||
<view class="group-avatar">
|
||||
<image :src="group.avatar || '/static/images/avatar.png'" mode="aspectFill" class="avatar-img"></image>
|
||||
</view>
|
||||
<view class="group-info">
|
||||
<view class="group-name">{{group.name}}</view>
|
||||
<view class="group-id">{{group.groupId}}</view>
|
||||
<view class="group-member-count">{{group.memberCount}}人</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 底部按钮 -->
|
||||
<view class="action-buttons">
|
||||
<view class="cancel-btn" @click="onCancel">取消</view>
|
||||
<view class="confirm-btn" @click="onConfirm">确定</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'GroupSelector',
|
||||
props: {
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
selected: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
searchKeyword: '',
|
||||
groups: [
|
||||
{
|
||||
id: '1',
|
||||
name: '产品讨论群',
|
||||
groupId: '12345678910',
|
||||
memberCount: 120,
|
||||
avatar: '/static/images/avatar.png',
|
||||
selected: false
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: '客户交流群',
|
||||
groupId: '28374656374',
|
||||
memberCount: 88,
|
||||
avatar: '/static/images/avatar.png',
|
||||
selected: false
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: '企业内部群',
|
||||
groupId: '98374625162',
|
||||
memberCount: 56,
|
||||
avatar: '/static/images/avatar.png',
|
||||
selected: false
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
name: '推广活动群',
|
||||
groupId: '38273645123',
|
||||
memberCount: 240,
|
||||
avatar: '/static/images/avatar.png',
|
||||
selected: false
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
name: '售后服务群',
|
||||
groupId: '73645182934',
|
||||
memberCount: 178,
|
||||
avatar: '/static/images/avatar.png',
|
||||
selected: false
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
filteredGroups() {
|
||||
if (!this.searchKeyword) {
|
||||
return this.groups;
|
||||
}
|
||||
|
||||
return this.groups.filter(group =>
|
||||
group.name.includes(this.searchKeyword) ||
|
||||
group.groupId.includes(this.searchKeyword)
|
||||
);
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
show(newVal) {
|
||||
if (newVal) {
|
||||
this.initSelection();
|
||||
}
|
||||
},
|
||||
selected: {
|
||||
handler: function(newVal) {
|
||||
this.initSelection();
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 初始化选择状态
|
||||
initSelection() {
|
||||
this.groups.forEach(group => {
|
||||
group.selected = this.selected.includes(group.id);
|
||||
});
|
||||
},
|
||||
|
||||
// 切换选择状态
|
||||
toggleSelect(group) {
|
||||
if (this.disabled) return;
|
||||
|
||||
if (!this.multiple) {
|
||||
// 单选模式
|
||||
this.groups.forEach(item => {
|
||||
item.selected = item.id === group.id;
|
||||
});
|
||||
} else {
|
||||
// 多选模式
|
||||
group.selected = !group.selected;
|
||||
}
|
||||
},
|
||||
|
||||
// 取消按钮
|
||||
onCancel() {
|
||||
this.$emit('cancel');
|
||||
this.$emit('update:show', false);
|
||||
},
|
||||
|
||||
// 确定按钮
|
||||
onConfirm() {
|
||||
const selectedGroups = this.groups.filter(group => group.selected);
|
||||
this.$emit('confirm', selectedGroups);
|
||||
this.$emit('update:show', false);
|
||||
},
|
||||
|
||||
// 关闭弹窗
|
||||
onClose() {
|
||||
this.$emit('cancel');
|
||||
this.$emit('update:show', false);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.group-selector {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
|
||||
.selector-header {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 30rpx;
|
||||
position: relative;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
|
||||
.selector-title {
|
||||
font-size: 34rpx;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.close-icon {
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
top: 30rpx;
|
||||
padding: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.search-box {
|
||||
padding: 20rpx 30rpx;
|
||||
}
|
||||
|
||||
.group-list {
|
||||
flex: 1;
|
||||
padding: 0 30rpx;
|
||||
overflow-y: auto;
|
||||
|
||||
.group-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20rpx 0;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
|
||||
.group-checkbox {
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.group-avatar {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
margin-right: 20rpx;
|
||||
border-radius: 10rpx;
|
||||
overflow: hidden;
|
||||
background-color: #f5f5f5;
|
||||
|
||||
.avatar-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.group-info {
|
||||
flex: 1;
|
||||
|
||||
.group-name {
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
margin-bottom: 4rpx;
|
||||
}
|
||||
|
||||
.group-id {
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
margin-bottom: 4rpx;
|
||||
}
|
||||
|
||||
.group-member-count {
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
padding: 20rpx 30rpx;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
|
||||
.cancel-btn, .confirm-btn {
|
||||
flex: 1;
|
||||
height: 80rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 40rpx;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
background-color: #f5f5f5;
|
||||
color: #666;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.confirm-btn {
|
||||
background-color: #4080ff;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
504
Cunkebao/pages/content/detail.vue
Normal file
504
Cunkebao/pages/content/detail.vue
Normal 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>
|
||||
741
Cunkebao/pages/content/index.vue
Normal file
741
Cunkebao/pages/content/index.vue
Normal file
@@ -0,0 +1,741 @@
|
||||
<template>
|
||||
<view class="content-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="add-btn" @click="createContent">
|
||||
<text class="add-icon">+</text>
|
||||
<text class="add-text">新建</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 内容区 -->
|
||||
<view class="content-wrapper">
|
||||
<!-- 搜索框 -->
|
||||
<view class="search-box">
|
||||
<u-search
|
||||
v-model="searchKeyword"
|
||||
placeholder="搜索内容库..."
|
||||
:showAction="false"
|
||||
shape="round"
|
||||
:clearabled="true"
|
||||
height="70"
|
||||
bgColor="#f4f4f4"
|
||||
></u-search>
|
||||
<view class="filter-btn" @click="showFilter">
|
||||
<u-icon name="filter" size="36" color="#000"></u-icon>
|
||||
</view>
|
||||
<view class="refresh-btn" @click="refreshData">
|
||||
<u-icon name="reload" size="36" color="#000"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 标签页 -->
|
||||
<view class="tabs">
|
||||
<view
|
||||
class="tab-item"
|
||||
:class="{ active: currentTab === 'all' }"
|
||||
@click="switchTab('all')"
|
||||
>
|
||||
全部
|
||||
</view>
|
||||
<view
|
||||
class="tab-item"
|
||||
:class="{ active: currentTab === 'friends' }"
|
||||
@click="switchTab('friends')"
|
||||
>
|
||||
微信好友
|
||||
</view>
|
||||
<view
|
||||
class="tab-item"
|
||||
:class="{ active: currentTab === 'groups' }"
|
||||
@click="switchTab('groups')"
|
||||
>
|
||||
聊天群
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 内容列表 -->
|
||||
<view class="content-list" v-if="filteredContents.length > 0">
|
||||
<view class="content-item" v-for="(item, index) in filteredContents" :key="index">
|
||||
<view class="content-header">
|
||||
<text class="content-title">{{item.title}}</text>
|
||||
<view class="usage-tag" :class="item.used ? 'used' : 'unused'">
|
||||
{{item.used ? '已使用' : '未使用'}}
|
||||
</view>
|
||||
<view class="more-icon" @click.stop="showOptions(item)">
|
||||
<u-icon name="more-dot-fill" size="32" color="#333"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content-info">
|
||||
<view class="info-row">
|
||||
<text class="info-label">来源：</text>
|
||||
<view class="source-avatars">
|
||||
<image v-for="(avatar, i) in item.sourceAvatars" :key="i" :src="avatar" mode="aspectFill" class="source-avatar"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">创建人：</text>
|
||||
<text class="info-value">{{item.creator}}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">内容数量：</text>
|
||||
<text class="info-value">{{item.contentCount}}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">更新时间：</text>
|
||||
<text class="info-value">{{item.updateTime}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 加载中提示 -->
|
||||
<view class="loading-container" v-else-if="loading">
|
||||
<text class="loading-text">加载中...</text>
|
||||
</view>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<view class="empty-container" v-else>
|
||||
<image src="/static/images/empty.png" mode="aspectFit" class="empty-img"></image>
|
||||
<text class="empty-text">暂无内容</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部导航栏 -->
|
||||
<CustomTabBar active="work"></CustomTabBar>
|
||||
|
||||
<!-- 筛选弹窗 -->
|
||||
<u-popup :show="showFilterPopup" @close="closeFilterPopup" mode="bottom">
|
||||
<view class="popup-content">
|
||||
<view class="popup-header">
|
||||
<text class="popup-title">筛选条件</text>
|
||||
<view class="popup-close" @click="closeFilterPopup">
|
||||
<u-icon name="close" size="28" color="#999"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="popup-body">
|
||||
<view class="filter-section">
|
||||
<view class="filter-title">使用状态</view>
|
||||
<view class="filter-options">
|
||||
<view
|
||||
class="filter-option"
|
||||
:class="{ active: selectedUsage === 'all' }"
|
||||
@click="selectUsage('all')"
|
||||
>
|
||||
全部
|
||||
</view>
|
||||
<view
|
||||
class="filter-option"
|
||||
:class="{ active: selectedUsage === 'used' }"
|
||||
@click="selectUsage('used')"
|
||||
>
|
||||
已使用
|
||||
</view>
|
||||
<view
|
||||
class="filter-option"
|
||||
:class="{ active: selectedUsage === 'unused' }"
|
||||
@click="selectUsage('unused')"
|
||||
>
|
||||
未使用
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="filter-section">
|
||||
<view class="filter-title">更新时间</view>
|
||||
<view class="filter-options">
|
||||
<view
|
||||
class="filter-option"
|
||||
:class="{ active: selectedTime === 'all' }"
|
||||
@click="selectTime('all')"
|
||||
>
|
||||
全部时间
|
||||
</view>
|
||||
<view
|
||||
class="filter-option"
|
||||
:class="{ active: selectedTime === 'today' }"
|
||||
@click="selectTime('today')"
|
||||
>
|
||||
今天
|
||||
</view>
|
||||
<view
|
||||
class="filter-option"
|
||||
:class="{ active: selectedTime === 'week' }"
|
||||
@click="selectTime('week')"
|
||||
>
|
||||
本周
|
||||
</view>
|
||||
<view
|
||||
class="filter-option"
|
||||
:class="{ active: selectedTime === 'month' }"
|
||||
@click="selectTime('month')"
|
||||
>
|
||||
本月
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="filter-buttons">
|
||||
<view class="reset-btn" @click="resetFilter">重置</view>
|
||||
<view class="confirm-btn" @click="applyFilter">确定</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
|
||||
<!-- 内容操作弹窗 -->
|
||||
<u-popup :show="showActionPopup" @close="closeActionPopup" mode="bottom">
|
||||
<view class="action-list">
|
||||
<view class="action-item" @click="editContent">
|
||||
<u-icon name="edit-pen" size="32" color="#333"></u-icon>
|
||||
<text>编辑内容</text>
|
||||
</view>
|
||||
<view class="action-item" @click="shareContent">
|
||||
<u-icon name="share" size="32" color="#333"></u-icon>
|
||||
<text>分享内容</text>
|
||||
</view>
|
||||
<view class="action-item delete" @click="deleteContent">
|
||||
<u-icon name="trash" size="32" color="#fa5151"></u-icon>
|
||||
<text>删除内容</text>
|
||||
</view>
|
||||
<view class="action-item cancel" @click="closeActionPopup">
|
||||
<text>取消</text>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CustomTabBar from '@/components/CustomTabBar.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
CustomTabBar
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
searchKeyword: '',
|
||||
currentTab: 'all',
|
||||
showFilterPopup: false,
|
||||
showActionPopup: false,
|
||||
selectedUsage: 'all',
|
||||
selectedTime: 'all',
|
||||
tempSelectedUsage: 'all',
|
||||
tempSelectedTime: 'all',
|
||||
loading: true,
|
||||
currentContent: null,
|
||||
contents: [
|
||||
{
|
||||
id: 1,
|
||||
title: '微信好友广告',
|
||||
used: true,
|
||||
sourceAvatars: ['/static/images/avatar.png'],
|
||||
creator: '海尼',
|
||||
contentCount: 0,
|
||||
updateTime: '2024-02-09 12:30'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: '开发群',
|
||||
used: true,
|
||||
sourceAvatars: ['/static/images/avatar.png'],
|
||||
creator: 'karuo',
|
||||
contentCount: 0,
|
||||
updateTime: '2024-02-09 12:30'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
filteredContents() {
|
||||
let result = [...this.contents];
|
||||
|
||||
// 搜索关键词筛选
|
||||
if (this.searchKeyword) {
|
||||
result = result.filter(item =>
|
||||
item.title.includes(this.searchKeyword) ||
|
||||
item.creator.includes(this.searchKeyword)
|
||||
);
|
||||
}
|
||||
|
||||
// 标签页筛选
|
||||
if (this.currentTab === 'friends') {
|
||||
result = result.filter(item => item.title.includes('好友'));
|
||||
} else if (this.currentTab === 'groups') {
|
||||
result = result.filter(item => item.title.includes('群'));
|
||||
}
|
||||
|
||||
// 使用状态筛选
|
||||
if (this.selectedUsage === 'used') {
|
||||
result = result.filter(item => item.used);
|
||||
} else if (this.selectedUsage === 'unused') {
|
||||
result = result.filter(item => !item.used);
|
||||
}
|
||||
|
||||
// 时间筛选
|
||||
if (this.selectedTime !== 'all') {
|
||||
const now = new Date();
|
||||
const today = new Date(now.getFullYear(), now.getMonth(), now.getDate()).getTime();
|
||||
const weekAgo = today - 7 * 24 * 60 * 60 * 1000;
|
||||
const monthAgo = new Date(now.getFullYear(), now.getMonth() - 1, now.getDate()).getTime();
|
||||
|
||||
result = result.filter(item => {
|
||||
const itemTime = new Date(item.updateTime).getTime();
|
||||
if (this.selectedTime === 'today') {
|
||||
return itemTime >= today;
|
||||
} else if (this.selectedTime === 'week') {
|
||||
return itemTime >= weekAgo;
|
||||
} else if (this.selectedTime === 'month') {
|
||||
return itemTime >= monthAgo;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.loadData();
|
||||
},
|
||||
methods: {
|
||||
// 返回上一页
|
||||
goBack() {
|
||||
uni.navigateBack();
|
||||
},
|
||||
|
||||
// 刷新数据
|
||||
refreshData() {
|
||||
this.loading = true;
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
uni.showToast({
|
||||
title: '刷新成功',
|
||||
icon: 'none'
|
||||
});
|
||||
}, 1000);
|
||||
},
|
||||
|
||||
// 显示筛选弹窗
|
||||
showFilter() {
|
||||
this.tempSelectedUsage = this.selectedUsage;
|
||||
this.tempSelectedTime = this.selectedTime;
|
||||
this.showFilterPopup = true;
|
||||
},
|
||||
|
||||
// 关闭筛选弹窗
|
||||
closeFilterPopup() {
|
||||
this.showFilterPopup = false;
|
||||
},
|
||||
|
||||
// 切换标签页
|
||||
switchTab(tab) {
|
||||
this.currentTab = tab;
|
||||
},
|
||||
|
||||
// 选择使用状态
|
||||
selectUsage(usage) {
|
||||
this.tempSelectedUsage = usage;
|
||||
},
|
||||
|
||||
// 选择时间范围
|
||||
selectTime(time) {
|
||||
this.tempSelectedTime = time;
|
||||
},
|
||||
|
||||
// 重置筛选条件
|
||||
resetFilter() {
|
||||
this.tempSelectedUsage = 'all';
|
||||
this.tempSelectedTime = 'all';
|
||||
},
|
||||
|
||||
// 应用筛选条件
|
||||
applyFilter() {
|
||||
this.selectedUsage = this.tempSelectedUsage;
|
||||
this.selectedTime = this.tempSelectedTime;
|
||||
this.closeFilterPopup();
|
||||
},
|
||||
|
||||
// 显示内容操作弹窗
|
||||
showOptions(content) {
|
||||
this.currentContent = content;
|
||||
this.showActionPopup = true;
|
||||
},
|
||||
|
||||
// 关闭内容操作弹窗
|
||||
closeActionPopup() {
|
||||
this.showActionPopup = false;
|
||||
},
|
||||
|
||||
// 创建内容
|
||||
createContent() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/content/detail'
|
||||
});
|
||||
},
|
||||
|
||||
// 编辑内容
|
||||
editContent() {
|
||||
uni.showToast({
|
||||
title: `编辑内容：${this.currentContent.title}`,
|
||||
icon: 'none'
|
||||
});
|
||||
this.closeActionPopup();
|
||||
},
|
||||
|
||||
// 分享内容
|
||||
shareContent() {
|
||||
uni.showToast({
|
||||
title: `分享内容：${this.currentContent.title}`,
|
||||
icon: 'none'
|
||||
});
|
||||
this.closeActionPopup();
|
||||
},
|
||||
|
||||
// 删除内容
|
||||
deleteContent() {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: `确定要删除内容"${this.currentContent.title}"吗？`,
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
this.contents = this.contents.filter(item => item.id !== this.currentContent.id);
|
||||
uni.showToast({
|
||||
title: '删除成功',
|
||||
icon: 'success'
|
||||
});
|
||||
}
|
||||
this.closeActionPopup();
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 加载数据
|
||||
loadData() {
|
||||
this.loading = true;
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content-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 {
|
||||
.add-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #4080ff;
|
||||
border-radius: 30rpx;
|
||||
padding: 12rpx 24rpx;
|
||||
color: #fff;
|
||||
|
||||
.add-icon {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
margin-right: 6rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.add-text {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 30rpx 20rpx;
|
||||
|
||||
.u-search {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.filter-btn, .refresh-btn {
|
||||
margin-left: 20rpx;
|
||||
padding: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
margin: 0 30rpx 20rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.tab-item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 24rpx 0;
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
|
||||
&.active {
|
||||
color: #4080ff;
|
||||
font-weight: 500;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 40rpx;
|
||||
height: 4rpx;
|
||||
background-color: #4080ff;
|
||||
border-radius: 2rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content-list {
|
||||
padding: 0 30rpx;
|
||||
|
||||
.content-item {
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 24rpx;
|
||||
margin-bottom: 20rpx;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
|
||||
|
||||
.content-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.content-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.usage-tag {
|
||||
font-size: 24rpx;
|
||||
padding: 4rpx 12rpx;
|
||||
border-radius: 8rpx;
|
||||
margin-right: 16rpx;
|
||||
|
||||
&.used {
|
||||
background-color: #e6f7ff;
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
&.unused {
|
||||
background-color: #f6ffed;
|
||||
color: #52c41a;
|
||||
}
|
||||
}
|
||||
|
||||
.more-icon {
|
||||
padding: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.content-info {
|
||||
.info-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10rpx;
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
|
||||
.info-label {
|
||||
color: #999;
|
||||
min-width: 150rpx;
|
||||
}
|
||||
|
||||
.source-avatars {
|
||||
display: flex;
|
||||
|
||||
.source-avatar {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.loading-container, .empty-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 300rpx;
|
||||
|
||||
.loading-text, .empty-text {
|
||||
font-size: 30rpx;
|
||||
color: #999;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.empty-img {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
.popup-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 30rpx;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
|
||||
.popup-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.popup-close {
|
||||
padding: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-body {
|
||||
padding: 30rpx;
|
||||
|
||||
.filter-section {
|
||||
margin-bottom: 30rpx;
|
||||
|
||||
.filter-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.filter-options {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.filter-option {
|
||||
padding: 16rpx 30rpx;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 8rpx;
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
margin-right: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
&.active {
|
||||
background-color: #e6f7ff;
|
||||
color: #4080ff;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.filter-buttons {
|
||||
display: flex;
|
||||
margin-top: 40rpx;
|
||||
|
||||
.reset-btn, .confirm-btn {
|
||||
flex: 1;
|
||||
height: 80rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 30rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.reset-btn {
|
||||
background-color: #f5f5f5;
|
||||
color: #666;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.confirm-btn {
|
||||
background-color: #4080ff;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.action-list {
|
||||
background-color: #fff;
|
||||
border-top-left-radius: 16rpx;
|
||||
border-top-right-radius: 16rpx;
|
||||
|
||||
.action-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 30rpx 0;
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
|
||||
u-icon {
|
||||
margin-right: 15rpx;
|
||||
}
|
||||
|
||||
&.delete {
|
||||
color: #fa5151;
|
||||
}
|
||||
|
||||
&.cancel {
|
||||
color: #666;
|
||||
margin-top: 16rpx;
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user