311 lines
7.7 KiB
Vue
311 lines
7.7 KiB
Vue
<template>
|
|
<view class="effect">
|
|
<custom-navbar title="推广效果" backgroundColor="#FFFFFF"></custom-navbar>
|
|
<view class="effect-selectTime">
|
|
<selectActiveTime v-model="timeList" @change="timeChange" type="daterange" style="width: 100%;" />
|
|
</view>
|
|
|
|
<CommonList ref="groupRef" :apiUrl="apiObj.effect[identityIndex]"
|
|
:listScrollHeight="`calc(100vh - ${statusBarHeight * 2 + 300}rpx)`">
|
|
<template #listData="{ list }">
|
|
<view class="order-container">
|
|
<!-- 订单卡片列表 -->
|
|
<view v-for="(item, index) in list" :key="index" class="order-card">
|
|
<!-- 订单编号和复制按钮 -->
|
|
<view class="order-number">
|
|
<text class="label">订单编号：</text>
|
|
<text class="number">{{ item.number }}</text>
|
|
<text class="copy-btn" @click="copyOrderNo(item.number)">复制</text>
|
|
</view>
|
|
|
|
<!-- 服务信息 -->
|
|
<view class="service-info">
|
|
<image :src="item.order_photo[0]" class="service-img" mode="aspectFill"></image>
|
|
<view class="service-detail">
|
|
<text class="service-name">{{ item.server_title }}</text>
|
|
<text class="order-time">下单时间：{{ item.pay_time }}</text>
|
|
<text class="order-status">
|
|
订单状态：<text style="color: #E8101E;">{{ getDescriptionByNumber(item.state) }}</text>
|
|
</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 金额信息 -->
|
|
<view class="amount-info">
|
|
<view class="amount-item">
|
|
<text class="amount-label">实付金额</text>
|
|
<text class="amount-value"><text style="font-size: 24rpx;">¥</text>{{ item.pay_money }}</text>
|
|
</view>
|
|
<view class="amount-item">
|
|
<text class="amount-label">佣金比例</text>
|
|
<text class="amount-value">{{ percentage(item.commission_rate)}}</text>
|
|
</view>
|
|
<view class="amount-item">
|
|
<text class="amount-label">预估佣金</text>
|
|
<text class="amount-value"><text style="font-size: 24rpx;">¥</text>{{ item.estimate_commission }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<!-- 空数据状态 -->
|
|
<template #empty>
|
|
<noData></noData>
|
|
</template>
|
|
</CommonList>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import request from "@/utils/request";
|
|
import selectActiveTime from "components/select-active-time/select-active-time2.vue";
|
|
import CommonList from "@/components/common/CommonList.vue";
|
|
export default {
|
|
name: "effect",
|
|
data() {
|
|
return {
|
|
timeList: [],
|
|
listQuery: {},
|
|
apiObj: {
|
|
effect:{
|
|
2:"/sj/serversPromotion/promotionEffect",
|
|
1:"/syr/serversPromotion/promotionEffect"
|
|
},
|
|
},
|
|
identityIndex: 2,
|
|
orders: [{
|
|
orderNo: 'M233448656770000123456',
|
|
imgUrl: 'https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/d1e9d7f08119492eb09a3d5c4c57501e.png~tplv-a9rns2rl98-24:720:720.jpeg?rcl=20251107141120721CF58B043A61780C8D&rk3s=8e244e95&rrcfp=d52e923b&x-expires=1763100680&x-signature=mZIqELwlIogxW0rc95Q0YbPqmvQ%3D',
|
|
serviceName: '深沉清洁三部曲',
|
|
createTime: '2025-08-09 12:12:00',
|
|
status: '已付款',
|
|
paidAmount: '¥100.99',
|
|
commissionRate: '6.4%',
|
|
estimatedCommission: '¥12.34'
|
|
},
|
|
{
|
|
orderNo: 'M233448656770000123456',
|
|
imgUrl: 'https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/d1e9d7f08119492eb09a3d5c4c57501e.png~tplv-a9rns2rl98-24:720:720.jpeg?rcl=20251107141120721CF58B043A61780C8D&rk3s=8e244e95&rrcfp=d52e923b&x-expires=1763100680&x-signature=mZIqELwlIogxW0rc95Q0YbPqmvQ%3D',
|
|
serviceName: '产后盆底肌腹直肌修复',
|
|
createTime: '2025-07-23 12:12:00',
|
|
status: '已退款',
|
|
paidAmount: '¥9100.99',
|
|
commissionRate: '1.4%',
|
|
estimatedCommission: '¥112.99'
|
|
}
|
|
]
|
|
};
|
|
},
|
|
components: {
|
|
selectActiveTime,
|
|
CommonList
|
|
},
|
|
onLoad(options) {
|
|
const systemInfo = uni.getSystemInfoSync();
|
|
this.statusBarHeight = systemInfo.statusBarHeight;
|
|
if (options.id && this.identityIndex) {
|
|
this.listQuery.id = options.id
|
|
this.$nextTick(() => {
|
|
this.search();
|
|
})
|
|
}
|
|
|
|
|
|
},
|
|
methods: {
|
|
timeChange(e){
|
|
console.log(e)
|
|
if(e[0]){
|
|
this.listQuery.start_time = e[0]
|
|
}
|
|
if(e[1]){
|
|
this.listQuery.end_time = e[1]
|
|
}
|
|
this.$nextTick(() => {
|
|
this.search();
|
|
})
|
|
},
|
|
copyOrderNo(orderNo) {
|
|
uni.setClipboardData({
|
|
data: orderNo,
|
|
success: () => {
|
|
uni.showToast({
|
|
title: '复制成功',
|
|
icon: 'none'
|
|
});
|
|
}
|
|
});
|
|
},
|
|
percentage(decimalNum) {
|
|
const keepDecimal = 1; // 保留 1 位小数
|
|
const percentValue = (decimalNum * 100).toFixed(keepDecimal);
|
|
return `${percentValue}%`;
|
|
},
|
|
search() {
|
|
// 触发列表刷新
|
|
this.$refs.groupRef.manualRefresh(this.listQuery);
|
|
},
|
|
getDescriptionByNumber(num) {
|
|
// 创建数字与描述的映射关系
|
|
const descriptionMap = {
|
|
1: "已付款",
|
|
2: "已付款",
|
|
3: "已付款 ",
|
|
4: "已付款",
|
|
5: "已付款 ",
|
|
6: "已付款",
|
|
7: "已退款",
|
|
};
|
|
|
|
// 检查输入是否为有效数字且在映射范围内
|
|
if (typeof num !== "number" || !descriptionMap.hasOwnProperty(num)) {
|
|
return "未知类型";
|
|
}
|
|
|
|
return descriptionMap[num];
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="less">
|
|
.effect {
|
|
.effect-selectTime {
|
|
padding: 20rpx 30rpx;
|
|
background: #fff;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.order-container {
|
|
padding-top: 20rpx;
|
|
background-color: transparent;
|
|
|
|
.order-card {
|
|
background-color: #fff;
|
|
border-radius: 20rpx;
|
|
padding: 20rpx;
|
|
|
|
.order-number {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 22rpx;
|
|
font-weight: 400;
|
|
font-size: 26rpx;
|
|
color: #333333;
|
|
line-height: 37rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
|
|
.label {
|
|
|
|
}
|
|
|
|
.number {
|
|
margin-right: 6rpx;
|
|
color: #333333;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.copy-btn {
|
|
color: #439EF0 ;
|
|
}
|
|
}
|
|
|
|
.service-info {
|
|
display: flex;
|
|
margin-bottom: 20rpx;
|
|
|
|
.service-img {
|
|
width: 150rpx;
|
|
height: 150rpx;
|
|
border-radius: 10rpx;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.service-detail {
|
|
margin-left: 20rpx;
|
|
flex: 1;
|
|
|
|
.service-name {
|
|
display: block;
|
|
font-weight: 500;
|
|
font-size: 30rpx;
|
|
color: #333333;
|
|
line-height: 42rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
margin-bottom: 24rpx;
|
|
}
|
|
|
|
.order-time {
|
|
display: block;
|
|
font-size: 26rpx;
|
|
color: #999999;
|
|
line-height: 37rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.order-status {
|
|
font-weight: 400;
|
|
font-size: 26rpx;
|
|
color: #999999;
|
|
line-height: 37rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
}
|
|
}
|
|
|
|
.amount-info {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
border-top: 1rpx solid #edeeee;
|
|
padding-top: 20rpx;
|
|
|
|
.amount-item {
|
|
flex: 1;
|
|
text-align: center;
|
|
|
|
.amount-label {
|
|
display: block;
|
|
font-weight: 400;
|
|
font-size: 26rpx;
|
|
color: #999999;
|
|
line-height: 37rpx;
|
|
text-align: center;
|
|
font-style: normal;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.amount-value {
|
|
font-family: DINPro, DINPro;
|
|
font-weight: 500;
|
|
font-size: 32rpx;
|
|
color: #333333;
|
|
line-height: 41rpx;
|
|
text-align: center;
|
|
font-style: normal;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.common-list {
|
|
background-color: #fafafa!important;
|
|
padding: 0;
|
|
::v-deep .list-scroll{
|
|
margin-top: 0;
|
|
}
|
|
::v-deep .list-container {
|
|
padding: 0 20rpx;
|
|
}
|
|
}
|
|
</style> |