81 lines
2.7 KiB
Vue
81 lines
2.7 KiB
Vue
<template>
|
|
<view class="page">
|
|
<view class="card">
|
|
<view class="title">{{ detail.task_no }}</view>
|
|
<view class="status">{{ statusText(detail.status) }}</view>
|
|
<view class="amount">¥{{ detail.base_amount || '0.00' }}</view>
|
|
<view class="progress">
|
|
<view class="bar"><view :style="{width: progressWidth}"></view></view>
|
|
<text>{{ detail.progress_count || 0 }}/{{ detail.target_count || 4 }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="card">
|
|
<view class="section-title">推荐进度</view>
|
|
<view class="record" v-for="item in records" :key="item.id">
|
|
<text>第 {{ item.step_no }} 单</text>
|
|
<text>{{ item.order_no }}</text>
|
|
</view>
|
|
<view v-if="!records.length" class="empty">暂无推荐订单</view>
|
|
</view>
|
|
<button v-if="canCashout" class="cashout" @tap="cashout">申请提前兑现</button>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { getSyjTaskDetail, applySyjCashout } from '@/api/syjPromote.js';
|
|
|
|
export default {
|
|
data() {
|
|
return { id: 0, detail: {} };
|
|
},
|
|
computed: {
|
|
records() {
|
|
return this.detail.records || [];
|
|
},
|
|
canCashout() {
|
|
const progress = Number(this.detail.progress_count || 0);
|
|
return Number(this.detail.status) === 0 && progress >= 1 && progress <= 3;
|
|
},
|
|
progressWidth() {
|
|
const total = Number(this.detail.target_count || 4);
|
|
return `${Math.min(100, Number(this.detail.progress_count || 0) / total * 100)}%`;
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
this.id = Number(options.id || 0);
|
|
this.load();
|
|
},
|
|
methods: {
|
|
load() {
|
|
getSyjTaskDetail(this.id).then(res => {
|
|
this.detail = res.data || res;
|
|
});
|
|
},
|
|
cashout() {
|
|
applySyjCashout(this.id).then(() => {
|
|
uni.showToast({ title: '已提交审核' });
|
|
this.load();
|
|
});
|
|
},
|
|
statusText(status) {
|
|
return ['进行中', '已完成', '提前兑现', '已关闭', '异常', '审核中'][Number(status)] || '未知';
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.page{min-height:100vh;background:#f6f7f9;padding:24rpx;}
|
|
.card{background:#fff;border-radius:16rpx;padding:30rpx;margin-bottom:20rpx;}
|
|
.title{font-size:30rpx;color:#222;font-weight:600;}
|
|
.status{font-size:26rpx;color:#0f8f6f;margin-top:12rpx;}
|
|
.amount{font-size:52rpx;color:#111;font-weight:600;margin:28rpx 0;}
|
|
.progress{display:flex;align-items:center;gap:20rpx;}
|
|
.bar{flex:1;height:12rpx;background:#edf0f2;border-radius:12rpx;overflow:hidden;}
|
|
.bar view{height:100%;background:#0f8f6f;}
|
|
.section-title{font-size:30rpx;font-weight:600;margin-bottom:20rpx;}
|
|
.record{display:flex;justify-content:space-between;font-size:26rpx;color:#555;padding:20rpx 0;border-bottom:1px solid #f0f0f0;}
|
|
.empty{text-align:center;color:#999;font-size:26rpx;padding:40rpx 0;}
|
|
.cashout{height:88rpx;line-height:88rpx;border-radius:44rpx;background:#0f8f6f;color:#fff;font-size:30rpx;}
|
|
</style>
|