shortPlay-mini/pages/data/data.vue

155 lines
4.0 KiB
Vue

<template>
<c-tabbar :current="2">
<view class="p-20">
<view class="wage p-30 flex flex-col">
<view class="wage-tip">总收益()</view>
<view class="money">{{(topData.totalMoney / 100).toFixed(2)}}</view>
<view class="flex flex-col">
<view class="flex justify-between" style="padding: 10upx 0;">
<view><text class="wage-tip">今日预估</text><text class="nums">{{(topData.todayEstimate/100).toFixed(2)}}</text></view>
<view><text class="wage-tip">七日预估</text><text class="nums">{{(topData.sevenDaysEstimate/100).toFixed(2)}}</text></view>
</view>
<view class="flex justify-between" style="padding: 10upx 0;">
<view><text class="wage-tip">昨日预估</text><text class="nums">{{(topData.yesterdayEstimate/100).toFixed(2)}}</text></view>
<view><text class="wage-tip">本月预估</text><text class="nums">{{(topData.thisMonthEstimate/100).toFixed(2)}}</text></view>
</view>
</view>
</view>
<view class="short-play p-20">
<view class="flex flex-row justify-between items-center">
<view>
<text class="title">短剧数据</text>
<text class="date">2024-01-01</text>
</view>
<view class="flex flex-row justify-center items-center" @click="navigateTo('/pages/data/shortPlay/shortPlay')">
<text>更多</text>
<u-icon name="arrow-right"></u-icon>
</view>
</view>
<view class="flex flex-row">
<view class="flex-1">
<view class="p2">预估收益</view>
<view class="m2">0.00</view>
<view class="flex flex-row justify-between extra">
<text>退款金额</text>
<text>0.00</text>
</view>
</view>
<view class="flex-1" style="margin-left: 20upx;">
<view class="p2">充值金额</view>
<view class="m2">0.00</view>
<view class="flex flex-row justify-between extra">
<text>广告收益</text>
<text>0.00</text>
</view>
</view>
</view>
</view>
</view>
<u-modal :show="showMini" title="长按二维码识别关注公众号" :closeOnClickOverlay="true" :showCancelButton="true"
cancelText="关闭" cancelColor="#007aff" :showConfirmButton="false" @close="showMini = false"
@cancel="showMini = false">
<view>
<view class="flex flex-col justify-center items-center" style="width: 100%;">
<image style="width: 300upx;height: 300upx;"
src="https://ly.imgother.hlh2021.com/1680836523536_小刘客服微信.jpg" mode="aspectFit"></image>
<view class="p-20">
<view style="color: red;font-size: 28upx;">关注后可以接受平台信息</view>
</view>
</view>
</view>
</u-modal>
</c-tabbar>
</template>
<script>
import CTabbar from '@/components/gTabbar.vue'
import {
record
} from '@/api/index.js'
export default {
components: {
CTabbar
},
data() {
return {
showMini: false,
topData: {
sevenDaysEstimate: 0,
thisMonthEstimate: 0,
todayEstimate: 0,
totalMoney: 0,
yesterdayEstimate: 0
}
}
},
created() {
this.getData()
},
onShow() {
this.getData()
},
methods: {
async getData() {
const res = await record.statistics({})
this.topData = res.data
}
}
}
</script>
<style lang="scss">
.wage {
background-color: $uni-theme;
border-radius: 20upx;
font-size: 25upx;
}
.wage-tip {
color: #84b6f9;
}
.money {
color: #f4f8ff;
font-size: 50upx;
font-weight: bold;
padding-top: 15upx;
padding-bottom: 30upx;
}
.nums {
color: #f4f8ff;
margin-left: 15upx;
}
.short-play {
margin-top: 30upx;
background-color: #ffffff;
border-radius: 20upx;
color: #a0a0a0;
.title {
font-size: 40upx;
font-weight: bold;
color: #303030;
}
.date {
font-size: 28upx;
margin-left: 20upx;
}
.p2 {
font-size: 25upx;
padding-top: 20upx;
padding-bottom: 10upx;
}
.m2 {
font-size: 45upx;
font-weight: bold;
color: #333333;
padding-bottom: 20upx;
}
.extra {
background-color: #f7f8fa;
border-radius: 10upx;
padding: 10upx;
font-size: 25upx;
}
}
</style>