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

578
Cunkebao/pages/traffic/create.vue Normal file
View File

@@ -0,0 +1,578 @@
<template>
<view class="traffic-create-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">{{pageTitle}}</view>
<view class="header-right">
<view class="save-btn" @click="saveTraffic">
<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="form-input-box">
<input type="digit" v-model="form.price" placeholder="0.00" class="form-input" />
</view>
</view>
<!-- 流量规模 -->
<view class="form-item">
<view class="form-label">流量规模（人数）</view>
<view class="form-input-box">
<input type="number" v-model="form.quantity" placeholder="0" class="form-input" />
</view>
</view>
<!-- 标签管理 -->
<view class="form-item">
<view class="form-label">标签管理</view>
<view class="tags-container">
<view class="tags-list">
<view
v-for="(tag, index) in form.tags"
:key="index"
class="tag-item"
>
<text class="tag-text">{{tag}}</text>
<text class="tag-delete" @click="removeTag(index)">×</text>
</view>
<view class="tag-add" @click="showAddTagModal">
<text>+ 添加标签</text>
</view>
</view>
</view>
</view>
<!-- 流量来源 -->
<view class="form-item">
<view class="form-label">流量来源</view>
<view class="source-radios">
<view
class="source-radio"
:class="{ active: form.source === 'platform' }"
@click="form.source = 'platform'"
>
<view class="radio-dot">
<view class="inner-dot" v-if="form.source === 'platform'"></view>
</view>
<text>平台</text>
</view>
<view
class="source-radio"
:class="{ active: form.source === 'custom' }"
@click="form.source = 'custom'"
>
<view class="radio-dot">
<view class="inner-dot" v-if="form.source === 'custom'"></view>
</view>
<text>自定义</text>
</view>
</view>
</view>
<!-- 地区限制 -->
<view class="form-item">
<view class="form-label">地区限制</view>
<view class="region-select" @click="showRegionSelector">
<text>{{form.region || '选择地区'}}</text>
<u-icon name="arrow-right" size="28" color="#999"></u-icon>
</view>
</view>
<!-- 流量时间 -->
<view class="form-item">
<view class="form-label">流量时间</view>
<view class="datetime-select" @click="showDatetimePicker">
<text>{{form.datetime || '选择时间'}}</text>
<u-icon name="arrow-right" size="28" color="#999"></u-icon>
</view>
</view>
<!-- 流量限制 -->
<view class="form-item">
<view class="form-label-with-switch">
<text>流量限制</text>
<u-switch v-model="form.enableLimit" activeColor="#4080ff"></u-switch>
</view>
<view class="limit-input-box" v-if="form.enableLimit">
<input type="number" v-model="form.limitPerDay" placeholder="每日限制数量" class="form-input" />
</view>
</view>
</view>
<!-- 添加标签弹窗 -->
<u-popup :show="showTagModal" @close="hideAddTagModal" mode="center">
<view class="tag-modal">
<view class="tag-modal-header">
<text class="modal-title">添加标签</text>
</view>
<view class="tag-modal-body">
<input type="text" v-model="newTagText" placeholder="请输入标签名称" class="tag-input" />
</view>
<view class="tag-modal-footer">
<view class="modal-btn cancel-btn" @click="hideAddTagModal">取消</view>
<view class="modal-btn confirm-btn" @click="addNewTag">确定</view>
</view>
</view>
</u-popup>
</view>
</template>
<script>
export default {
data() {
return {
isEdit: false, // 是否为编辑模式
trafficId: null, // 流量包ID
form: {
title: '', // 流量包名称
price: '', // 价格
quantity: '', // 流量规模
tags: [], // 标签数组
source: 'platform', // 流量来源：platform-平台，custom-自定义
region: '', // 地区限制
datetime: '', // 流量时间
enableLimit: false, // 是否启用流量限制
limitPerDay: '' // 每日限制数量
},
showTagModal: false, // 是否显示添加标签弹窗
newTagText: '' // 新标签的文本
}
},
onLoad(options) {
// 判断是否为编辑模式
if (options.id) {
this.isEdit = true;
this.trafficId = options.id;
this.loadTrafficData();
}
},
computed: {
// 页面标题
pageTitle() {
return this.isEdit ? '编辑分发' : '新建分发';
}
},
methods: {
// 加载流量包数据
loadTrafficData() {
uni.showLoading({
title: '加载中...'
});
// 模拟API请求获取数据
setTimeout(() => {
// 根据ID获取对应的数据
// 这里使用模拟数据
let mockData = {
1: {
title: '普通流量包',
price: '0.50',
quantity: '10',
tags: ['新用户', '低活跃度', '全国'],
source: 'platform',
region: '全国',
datetime: '2023-09-01',
enableLimit: true,
limitPerDay: '5'
},
2: {
title: '高质量流量',
price: '2.50',
quantity: '25',
tags: ['高消费', '高活跃度', '一线城市'],
source: 'custom',
region: '一线城市',
datetime: '2023-09-05',
enableLimit: false,
limitPerDay: ''
},
3: {
title: '精准营销流量',
price: '3.80',
quantity: '50',
tags: ['潜在客户', '有购买意向', '华东地区'],
source: 'platform',
region: '华东地区',
datetime: '2023-09-10',
enableLimit: true,
limitPerDay: '10'
}
};
// 获取数据并填充表单
if (mockData[this.trafficId]) {
this.form = mockData[this.trafficId];
uni.hideLoading();
} else {
uni.hideLoading();
uni.showToast({
title: '未找到对应数据',
icon: 'none'
});
setTimeout(() => {
uni.navigateBack();
}, 1500);
}
}, 1000);
},
// 返回上一页
goBack() {
uni.navigateBack();
},
// 保存流量包
saveTraffic() {
// 表单验证
if (!this.form.title) {
uni.showToast({
title: '请输入流量包名称',
icon: 'none'
});
return;
}
if (!this.form.price) {
uni.showToast({
title: '请输入价格',
icon: 'none'
});
return;
}
if (!this.form.quantity) {
uni.showToast({
title: '请输入流量规模',
icon: 'none'
});
return;
}
// 在实际应用中，这里应该提交表单数据到服务器
uni.showLoading({
title: this.isEdit ? '更新中...' : '保存中...'
});
// 模拟API请求
setTimeout(() => {
uni.hideLoading();
uni.showToast({
title: this.isEdit ? '更新成功' : '创建成功',
icon: 'success'
});
// 返回上一页
setTimeout(() => {
uni.navigateBack();
}, 1500);
}, 1000);
},
// 显示添加标签弹窗
showAddTagModal() {
this.showTagModal = true;
this.newTagText = '';
},
// 隐藏添加标签弹窗
hideAddTagModal() {
this.showTagModal = false;
},
// 添加新标签
addNewTag() {
if (this.newTagText.trim()) {
this.form.tags.push(this.newTagText.trim());
this.hideAddTagModal();
} else {
uni.showToast({
title: '标签名称不能为空',
icon: 'none'
});
}
},
// 删除标签
removeTag(index) {
this.form.tags.splice(index, 1);
},
// 显示地区选择器
showRegionSelector() {
// 这里应该调用地区选择器组件
uni.showToast({
title: '地区选择功能开发中',
icon: 'none'
});
},
// 显示时间选择器
showDatetimePicker() {
// 这里应该调用时间选择器组件
uni.showToast({
title: '时间选择功能开发中',
icon: 'none'
});
}
}
}
</script>
<style lang="scss" scoped>
.traffic-create-container {
min-height: 100vh;
background-color: #f9fafb;
}
.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;
}
.form-label-with-switch {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 30rpx;
font-weight: 500;
color: #333;
margin-bottom: 20rpx;
}
.form-input-box, .limit-input-box {
.form-input {
width: 100%;
height: 80rpx;
background-color: #f5f5f5;
border-radius: 8rpx;
padding: 0 20rpx;
font-size: 28rpx;
}
}
.tags-container {
.tags-list {
display: flex;
flex-wrap: wrap;
.tag-item {
display: flex;
align-items: center;
background-color: #f0f7ff;
border-radius: 8rpx;
padding: 10rpx 16rpx;
margin-right: 16rpx;
margin-bottom: 16rpx;
.tag-text {
font-size: 26rpx;
color: #4080ff;
}
.tag-delete {
font-size: 28rpx;
color: #999;
margin-left: 10rpx;
padding: 0 5rpx;
}
}
.tag-add {
display: flex;
align-items: center;
justify-content: center;
background-color: #f5f5f5;
border-radius: 8rpx;
padding: 10rpx 16rpx;
margin-bottom: 16rpx;
text {
font-size: 26rpx;
color: #666;
}
}
}
}
.source-radios {
display: flex;
.source-radio {
display: flex;
align-items: center;
margin-right: 40rpx;
.radio-dot {
width: 36rpx;
height: 36rpx;
border-radius: 50%;
border: 2rpx solid #999;
margin-right: 10rpx;
display: flex;
align-items: center;
justify-content: center;
.inner-dot {
width: 20rpx;
height: 20rpx;
border-radius: 50%;
background-color: #4080ff;
}
}
text {
font-size: 28rpx;
color: #333;
}
&.active {
.radio-dot {
border-color: #4080ff;
}
}
}
}
.region-select, .datetime-select {
display: flex;
justify-content: space-between;
align-items: center;
height: 80rpx;
background-color: #f5f5f5;
border-radius: 8rpx;
padding: 0 20rpx;
text {
font-size: 28rpx;
color: #333;
}
}
}
}
.tag-modal {
width: 600rpx;
background-color: #fff;
border-radius: 16rpx;
overflow: hidden;
.tag-modal-header {
padding: 30rpx;
text-align: center;
border-bottom: 1rpx solid #f0f0f0;
.modal-title {
font-size: 34rpx;
font-weight: 500;
color: #333;
}
}
.tag-modal-body {
padding: 30rpx;
.tag-input {
width: 100%;
height: 80rpx;
background-color: #f5f5f5;
border-radius: 8rpx;
padding: 0 20rpx;
font-size: 28rpx;
}
}
.tag-modal-footer {
display: flex;
border-top: 1rpx solid #f0f0f0;
.modal-btn {
flex: 1;
height: 90rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 30rpx;
&.cancel-btn {
color: #666;
border-right: 1rpx solid #f0f0f0;
}
&.confirm-btn {
color: #4080ff;
}
}
}
}
</style>

305
Cunkebao/pages/traffic/index.vue Normal file
View File

@@ -0,0 +1,305 @@
<template>
<view class="traffic-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="createTraffic">
<u-icon name="plus" size="28" color="#fff"></u-icon>
<text class="add-text">新建分发</text>
</view>
</view>
</view>
<!-- 流量包列表 -->
<view class="traffic-list">
<!-- 普通流量包 -->
<view class="traffic-item">
<view class="traffic-header">
<text class="traffic-title">普通流量包</text>
<view class="traffic-actions">
<u-icon name="edit-pen" size="36" color="#999" @click="editTraffic(1)"></u-icon>
<u-icon name="trash" size="36" color="#999" @click="deleteTraffic(1)" class="trash-icon"></u-icon>
</view>
</view>
<view class="traffic-price">
<text class="price-symbol">¥</text>
<text class="price-value">0.50</text>
<text class="price-unit">/ 流量包</text>
</view>
<view class="traffic-info">
<text class="total-added">总添加人数: 10 人</text>
</view>
<view class="traffic-tags">
<view class="tag">新用户</view>
<view class="tag">低活跃度</view>
<view class="tag">全国</view>
</view>
</view>
<!-- 高质量流量 -->
<view class="traffic-item">
<view class="traffic-header">
<text class="traffic-title">高质量流量</text>
<view class="traffic-actions">
<u-icon name="edit-pen" size="36" color="#999" @click="editTraffic(2)"></u-icon>
<u-icon name="trash" size="36" color="#999" @click="deleteTraffic(2)" class="trash-icon"></u-icon>
</view>
</view>
<view class="traffic-price">
<text class="price-symbol">¥</text>
<text class="price-value">2.50</text>
<text class="price-unit">/ 流量包</text>
</view>
<view class="traffic-info">
<text class="total-added">总添加人数: 25 人</text>
</view>
<view class="traffic-tags">
<view class="tag">高消费</view>
<view class="tag">高活跃度</view>
<view class="tag">一线城市</view>
</view>
</view>
<!-- 精准营销流量 -->
<view class="traffic-item">
<view class="traffic-header">
<text class="traffic-title">精准营销流量</text>
<view class="traffic-actions">
<u-icon name="edit-pen" size="36" color="#999" @click="editTraffic(3)"></u-icon>
<u-icon name="trash" size="36" color="#999" @click="deleteTraffic(3)" class="trash-icon"></u-icon>
</view>
</view>
<view class="traffic-price">
<text class="price-symbol">¥</text>
<text class="price-value">3.80</text>
<text class="price-unit">/ 流量包</text>
</view>
<view class="traffic-info">
<text class="total-added">总添加人数: 50 人</text>
</view>
<view class="traffic-tags">
<view class="tag">潜在客户</view>
<view class="tag">有购买意向</view>
<view class="tag">华东地区</view>
</view>
</view>
</view>
<!-- 底部导航栏 -->
<CustomTabBar active="work"></CustomTabBar>
</view>
</template>
<script>
import CustomTabBar from '@/components/CustomTabBar.vue'
export default {
components: {
CustomTabBar
},
data() {
return {
trafficItems: [
{
id: 1,
title: '普通流量包',
price: 0.5,
totalAdded: 10,
tags: ['新用户', '低活跃度', '全国']
},
{
id: 2,
title: '高质量流量',
price: 2.5,
totalAdded: 25,
tags: ['高消费', '高活跃度', '一线城市']
},
{
id: 3,
title: '精准营销流量',
price: 3.8,
totalAdded: 50,
tags: ['潜在客户', '有购买意向', '华东地区']
}
]
}
},
methods: {
// 返回上一页
goBack() {
uni.navigateBack();
},
// 创建新的流量分发
createTraffic() {
uni.navigateTo({
url: '/pages/traffic/create'
})
},
// 编辑流量分发
editTraffic(id) {
uni.navigateTo({
url: `/pages/traffic/create?id=${id}`
})
},
// 删除流量分发
deleteTraffic(id) {
uni.showModal({
title: '提示',
content: '确定要删除该流量分发吗？',
success: (res) => {
if (res.confirm) {
// 模拟删除操作
this.trafficItems = this.trafficItems.filter(item => item.id !== id);
uni.showToast({
title: '删除成功',
icon: 'success'
});
}
}
});
}
}
}
</script>
<style lang="scss" scoped>
.traffic-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-text {
font-size: 28rpx;
margin-left: 8rpx;
}
}
}
}
.traffic-list {
padding: 30rpx;
.traffic-item {
background-color: #fff;
border-radius: 16rpx;
padding: 30rpx;
margin-bottom: 30rpx;
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
.traffic-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20rpx;
.traffic-title {
font-size: 34rpx;
font-weight: 600;
color: #333;
}
.traffic-actions {
display: flex;
.trash-icon {
margin-left: 20rpx;
}
}
}
.traffic-price {
display: flex;
align-items: baseline;
margin-bottom: 20rpx;
.price-symbol {
font-size: 30rpx;
color: #1cc15e;
font-weight: 600;
}
.price-value {
font-size: 60rpx;
color: #1cc15e;
font-weight: 700;
font-family: 'Digital-Bold', sans-serif;
margin: 0 8rpx;
}
.price-unit {
font-size: 28rpx;
color: #666;
}
}
.traffic-info {
margin-bottom: 20rpx;
.total-added {
font-size: 28rpx;
color: #666;
}
}
.traffic-tags {
display: flex;
flex-wrap: wrap;
.tag {
background-color: #f5f5f5;
border-radius: 8rpx;
padding: 8rpx 16rpx;
font-size: 24rpx;
color: #666;
margin-right: 16rpx;
margin-bottom: 16rpx;
}
}
}
}
</style>