109 lines
4.0 KiB
Vue
109 lines
4.0 KiB
Vue
<template>
|
||
<view class="page">
|
||
<view class="summary">
|
||
<view class="summary-title">我的推广任务</view>
|
||
<view class="summary-amount">¥{{ overview.pending_amount || '0.00' }}</view>
|
||
<view class="summary-sub">待推广金额 / 满 ¥{{ overview.base_amount || '4333.00' }} 生成 1 个任务</view>
|
||
<view class="summary-grid">
|
||
<view><text>{{ overview.active_task_count || 0 }}</text><text>进行中</text></view>
|
||
<view><text>{{ overview.completed_task_count || 0 }}</text><text>已完成</text></view>
|
||
<view><text>{{ overview.cashout_task_count || 0 }}</text><text>已兑现</text></view>
|
||
</view>
|
||
</view>
|
||
<view class="tabs">
|
||
<view v-for="tab in tabs" :key="tab.value" :class="{active: status === tab.value}" @tap="switchTab(tab.value)">{{ tab.label }}</view>
|
||
</view>
|
||
<view class="task" v-for="item in list" :key="item.id" @tap="goDetail(item.id)">
|
||
<view class="task-head">
|
||
<text>{{ item.task_no }}</text>
|
||
<text>{{ statusText(item.status) }}</text>
|
||
</view>
|
||
<view class="progress">
|
||
<view class="bar"><view :style="{width: progressWidth(item)}"></view></view>
|
||
<text>{{ item.progress_count }}/{{ item.target_count }}</text>
|
||
</view>
|
||
<view class="task-meta">来源订单：{{ item.source_order_no }}</view>
|
||
<view class="task-meta">任务金额：¥{{ item.base_amount }}</view>
|
||
</view>
|
||
<view v-if="!list.length && !loading" class="empty">暂无推广任务</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { getSyjOverview, getSyjTaskList } from '@/api/syjPromote.js';
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
overview: {},
|
||
list: [],
|
||
loading: false,
|
||
status: '',
|
||
page: 1,
|
||
tabs: [
|
||
{ label: '全部', value: '' },
|
||
{ label: '进行中', value: 0 },
|
||
{ label: '已完成', value: 1 },
|
||
{ label: '已兑现', value: 2 },
|
||
{ label: '异常', value: 4 }
|
||
]
|
||
};
|
||
},
|
||
onShow() {
|
||
this.load();
|
||
},
|
||
methods: {
|
||
load() {
|
||
this.loading = true;
|
||
Promise.all([
|
||
getSyjOverview(),
|
||
getSyjTaskList({ status: this.status, page: this.page, limit: 20 })
|
||
]).then(([overview, tasks]) => {
|
||
this.overview = overview.data || overview;
|
||
const data = tasks.data || tasks;
|
||
this.list = data.list || [];
|
||
}).finally(() => {
|
||
this.loading = false;
|
||
});
|
||
},
|
||
switchTab(value) {
|
||
this.status = value;
|
||
this.page = 1;
|
||
this.load();
|
||
},
|
||
goDetail(id) {
|
||
uni.navigateTo({ url: `/pages/syj/promote_task/detail?id=${id}` });
|
||
},
|
||
progressWidth(item) {
|
||
const total = Number(item.target_count || 4);
|
||
return `${Math.min(100, Number(item.progress_count || 0) / total * 100)}%`;
|
||
},
|
||
statusText(status) {
|
||
return ['进行中', '已完成', '提前兑现', '已关闭', '异常', '审核中'][Number(status)] || '未知';
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.page{min-height:100vh;background:#f6f7f9;padding:24rpx;}
|
||
.summary{background:#fff;border-radius:16rpx;padding:32rpx;}
|
||
.summary-title{font-size:30rpx;color:#333;}
|
||
.summary-amount{font-size:56rpx;font-weight:600;color:#0f8f6f;margin-top:20rpx;}
|
||
.summary-sub{font-size:24rpx;color:#777;margin-top:8rpx;}
|
||
.summary-grid{display:flex;margin-top:28rpx;border-top:1px solid #eee;padding-top:24rpx;}
|
||
.summary-grid view{flex:1;display:flex;flex-direction:column;gap:8rpx;font-size:24rpx;color:#777;}
|
||
.summary-grid text:first-child{font-size:34rpx;color:#222;font-weight:600;}
|
||
.tabs{display:flex;gap:16rpx;margin:24rpx 0;overflow-x:auto;}
|
||
.tabs view{white-space:nowrap;background:#fff;border-radius:999rpx;padding:14rpx 24rpx;font-size:26rpx;color:#555;}
|
||
.tabs .active{background:#0f8f6f;color:#fff;}
|
||
.task{background:#fff;border-radius:16rpx;padding:28rpx;margin-bottom:20rpx;}
|
||
.task-head{display:flex;justify-content:space-between;font-size:28rpx;color:#222;}
|
||
.task-head text:last-child{color:#0f8f6f;}
|
||
.progress{display:flex;align-items:center;gap:20rpx;margin:24rpx 0;}
|
||
.bar{flex:1;height:12rpx;background:#edf0f2;border-radius:12rpx;overflow:hidden;}
|
||
.bar view{height:100%;background:#0f8f6f;}
|
||
.task-meta{font-size:24rpx;color:#777;line-height:38rpx;}
|
||
.empty{text-align:center;color:#999;font-size:28rpx;padding:80rpx 0;}
|
||
</style>
|