添加新页面

This commit is contained in:
yangjun 2024-06-29 16:29:46 +08:00
parent aa71f304ad
commit 79f1c086d9
2 changed files with 609 additions and 0 deletions

270
my/dashang/index.css Normal file
View File

@ -0,0 +1,270 @@
/* 背景图片 */
.ciycle {
width: 100%;
height: 200px;
background-image: url("@/static/images/top.png");
background-size: 100%;
background-repeat: no-repeat;
}
#IntegralStatisticsTop {
display: flex;
height: 220px;
border-radius: 10px;
margin: 0px 5px 14px 5px;
padding-top: 14px;
flex-wrap: wrap;
}
#IntegralStatisticsBottom {
position: relative;
top: 50px;
margin: auto;
}
/* .optionsDetailImport -.optionsDetailImport {
content: "";
display: block;
border-bottom: 1px solid #ccc;
} */
.innerTopLeft {
width: 300px;
height: fit-content;
font-size: 30rpx;
display: flex;
justify-content: space-around;
padding-left: 10px;
}
.innerTopRight {
height: fit-content;
font-size: 30rpx;
display: flex;
justify-content: right;
color: #FFFFFF;
padding-right: 10px;
background-image: url(@/static/images/loadMoreToRight.png);
background-repeat: no-repeat;
background-position: right;
background-size: 9%;
margin-right: 11px;
}
.innerTop {
width: 100%;
height: fit-content;
display: flex;
justify-content: flex-start;
}
.innerBottomOfTop {
display: flex;
align-items: center;
padding-right: 5px;
}
.innerBottom {
width: 97%;
height: 200px;
margin: 14px 5px 14px 5px;
background-color: #FFFFFF;
border-radius: 10px;
padding: 10px;
box-shadow: 2px 2px 15px 1px #b5b5b5;
}
.innerBottomOfBottom {
padding: 0;
display: grid;
grid-template-rows: auto;
grid-template-columns: 95px 95px;
grid-gap: 0px;
}
.IntegralClassify {
height: 80px;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
flex-direction: column;
}
.IntegralClassify view:nth-child(1) {
font-size: 20px;
}
.IntegralClassifyInnerBottom {
margin-top: 10px;
}
.IntegralImport {
min-width: 140px;
height: 100px;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
margin-top: 10px;
font-size: 16px;
position: relative;
top: calc((100% - 100px) /2);
}
.totalIntegralNumber {
font-size: 24px;
font-weight: 600;
}
.isbOptions {
display: flex;
justify-content: space-around;
font-size: 36rpx;
font-weight: bold;
}
.optionsDetail {
display: flex;
flex-wrap: wrap;
flex-direction: column;
overflow: auto;
background-color: #FFFFFF;
border-radius: 10px;
margin: 10px;
box-shadow: 2px 2px 15px 1px #b5b5b5;
}
.optionsDetailImport {
padding-left: 10px;
margin-top: 15px;
}
.dateHeader {
font-weight: 550;
}
.dataDetail {
display: flex;
justify-content: space-around;
margin-top: 15px;
align-items: center;
}
.example-body {
background-color: #fff;
padding: 10px;
}
>>>.uni-date-editor--x {
display: none;
}
.activeTab {
color: #0aa86a;
background-color: #FFFFFF;
padding: 6px;
border-radius: 10px;
width: 60px;
text-align: center;
}
.defaultTab {
color: #FFFFFF;
padding: 6px;
width: 60px;
text-align: center;
}
.innerTopRightImport {
width: calc(100% - 200px);
display: flex;
justify-content: right;
align-items: center;
}
.storedIntegralTop {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 550;
}
.storedIntegralTopOfRight {
width: 100%;
display: flex;
justify-content: space-between;
margin-right: 20px;
align-items: center;
}
.storedIntegralTopOfRight view:nth-child(1) {
font-size: 20px;
margin-left: 5px;
}
.storedIntegralTopOfRight view:nth-child(2) {
font-size: 20px;
color: #e52c26;
}
.storedIntegralMiddle {
width: 100%;
margin-top: 28rpx;
}
.storedIntegralMiddle view {
color: gray;
margin-left: 6px;
}
.storedIntegralMiddle view:nth-child(2) {
margin-top: 10px;
}
.storedIntegralBottom {
margin-top: 28rpx;
padding-bottom: 15px;
margin-left: 3px;
font-weight: 600;
}
.withdrawalMoneyBtn {
width: 80%;
height: 40px;
border-radius: 20px;
font-size: 20px;
color: #FFFFFF;
background-color: #50b58d;
display: flex;
justify-content: center;
align-items: center;
margin-top: 12px;
}
.middleTop {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.line {
border-left: 1px solid #cacaca;
height: 80px;
}
.viewOrdersInfo {
display: flex;
justify-content: space-between;
}
.viewOrdersInfo view:nth-child(2) {
margin-right: 20px;
color: #007aff;
font-weight: 500;
font-size: 16px;
}

339
my/dashang/index.vue Normal file
View File

@ -0,0 +1,339 @@
<template>
<view>
<view class="ciycle">
<view id="IntegralStatisticsTop" ref="IntegralStatisticsTop">
<view class="innerTop">
<view class="innerTopLeft">
<view v-for="item in rangeSelect" :key="item.id"
:class="activeRange == item.id ? 'activeTab' : 'defaultTab'" @click="selectedRange(item)">
{{item.title}}
</view>
</view>
<!-- <view class="innerTopRightImport">
<view class="innerTopRight" @tap="showAndHiddenDatePicker">查看更多
</view>
</view> -->
</view>
<view class="innerBottom" style="height: 140px;">
<view class="innerBottomOfTop">
<view class="innerTimer">
{{this.fundTopDate}}
</view>
</view>
<view class="middleTop">
<view class="IntegralImport">
<view class="totalIntegralNumber">
{{this.bqsr ? this.bqsr : 0 }}
</view>
<view class="totalIntegral">
本期收入()
</view>
</view>
<!-- <view class="line"></view>
<view class="IntegralImport">
<view class="totalIntegralNumber">
{{this.bqzc ? this.bqzc : 0 }}
</view>
<view class="totalIntegral">
本期支出()
</view>
</view> -->
</view>
</view>
<!-- 时间选择 -->
<uni-datetime-picker type="date" ref="dataPicker" :clear-icon="true" return-type="string"
@change="confirmSelectedDate" v-model="selectedDate" @maskClick="maskClick" />
</view>
<view id="IntegralStatisticsBottom" :style="{height:domNeedHeight == 0? 420 + 'px' : domNeedHeight + 'px',top:0}">
<view class="optionsDetail">
<!-- 父元素列表 -->
<cc-nodata title="暂无数据" v-if="noDataScrollStatus"
:style="{width:100+'%',height:domNeedHeight == 0? 420 + 'px' : domNeedHeight + 'px'}"></cc-nodata>
<view v-if="!noDataScrollStatus" v-for="(item,index) in commissionDetail" :key="index"
class="optionsDetailImport">
<view class="storedIntegralTop">
<view class="storedIntegralTopOfRight">
<view class="">{{item.title}}</view>
</view>
</view>
<view class="storedIntegralMiddle">
<view class="">{{item.type==1?'钱包收入:':'钱包支出:'}} {{item.money}}</view>
</view>
<view class="storedIntegralMiddle">
<view class="">服务时间:{{item.createTime}}</view>
</view>
<!-- <u-gap style="width:97%" height="1" bg-color="#ededed"></u-gap> -->
</view>
<uniLoadMore color="#007AFF" :iconType="iconType" :status="loadingStatus" :marginBottom="20"
:marginTop="20" v-if="isShowLoadMore" />
</view>
</view>
</view>
</view>
</template>
<script>
import * as websocketUtils from 'utils/websocketUtils.js';
import uniLoadMore from "@/uview-ui/components/u-loadmore/u-loadmore.vue";
import navBar from "@/components/navBar/navBar.vue";
import {
watch
} from "vue";
export default {
components: {
uniLoadMore,
navBar,
},
onUnload() {
this.selectedDate = null;
this.activeRange = null;
this.loadingStatus = null;
this.currentPage = null;
this.commissionDetail = null;
this.intervalDatesUltimately = null;
this.pageSize = null;
this.recordLastTimeRange = null;
this.noDataScrollStatus = null;
this.noDataMenuStatus = null;
this.isIntegralHasData = null;
this.iconType = null;
this.rangeSelect = null;
this.bottomOptionsInfo = null;
},
onLaunch() {},
onShow() {},
onLoad() {
this.selectedDate = this.getCurrentTimeStamp();
this.artificerId = uni.getStorageSync("artificerId");
//()
this.getCommissionDataList({
artificerId: this.artificerId,
fundData: this.selectedDate,
fundType: 1,
limit: this.pageSize,
page: this.currentPage,
});
},
onReady() {
//
this.selfAdaptionChangeElemtHeight();
},
//
onReachBottom(e) {
this.currentPage += 1;
this.isScroll = true;
if (this.loadingStatus == "nomore") {
return;
} else {
this.getCommissionDataList({
artificerId: this.artificerId,
fundData: this.selectedDate,
fundType: this.activeRange,
limit: this.pageSize,
page: this.currentPage,
}, true);
}
},
//
onPullDownRefresh(e) {
this.commissionDetail = [];
this.currentPage = 1;
this.selectedDate = this.getCurrentTimeStamp();
this.getCommissionDataList({
artificerId: this.artificerId,
fundData: this.selectedDate,
fundType: this.activeRange,
limit: this.pageSize,
page: this.currentPage,
});
},
watch: {
//
commissionDetail(newData, oldData) {
if (newData.length >= 1) {
uni.stopPullDownRefresh();
}
},
},
data() {
return {
domNeedHeight: 0, //
selectedDate: this.currentDate,
statusBarHeight: 20,
activeRange: 1,
loadingStatus: "loadmore",
currentPage: 1,
pageSize: 6,
bqsr:'0',
// bqzc:'0',
intervalDatesUltimately: null,
recordLastTimeRange: null,
noDataScrollStatus: false,
noDataMenuStatus: false,
isIntegralHasData: null,
iconType: "circle",
title: "分成明细",
isShowLoadMore: null,
fundTopDate: '',
backgroundcolor: "linear-gradient(to bottom, #294856, #1a615b)",
artificerld: null,
parentData: {},
homePageDataNum: {
totalRevenue: null,
projectBenefits: null,
vehicleFareAmount: null,
channelDeduction: null,
valueStorageDeduction: null,
fundRange: null,
},
rangeSelect: [{
id: 1,
title: "本期",
}, {
id: 2,
title: "上期",
}, {
id: 3,
title: "本月",
}, {
id: 4,
title: "上月",
}],
commissionDetail: [],
}
},
methods: {
//
selfAdaptionChangeElemtHeight() {
let _this = this;
try {
uni.getSystemInfo({
success: res => {
if (res && res.windowHeight) {
let query = uni.createSelectorQuery().in(this);
query
.select(".optionsDetail")
.boundingClientRect((data) => {
_this.domNeedHeight = res.windowHeight - data.top - 20;
})
.exec();
}
}
});
} catch (e) {
//TODO handle the exception
}
},
//()
getCommissionDataList(params, isScroll) {
this.loadingStatus = "loading";
let {
fundData,
fundType,
limit,
page,
} = params;
this.$Request.get("/app/artificer/selectArtificerQianbao", params).then((
res) => {
this.bqsr = "0";
// this.bqzc = "0";
this.fundTopDate = res.startFundData + "---" + res.endFundData;
//userMoneyDetailsList.records,
if (res && res.data && res.data.records.length > 0) {
this.bqsr = res.bqsr;
// this.bqzc = res.bqzc;
//
let obj = {};
res.data.records.forEach((item) => {
obj = {
title: item.title,
type: item.type,
createTime: item.createTime,
money: item.money,
}
this.commissionDetail.push(obj);
})
this.noDataScrollStatus = false;
this.isShowLoadMore = true;
if (this.commissionDetail.length < res.data.total) {
this.loadingStatus = "loadmore";
} else if (this.commissionDetail.length > res.data.total) {
this.loadingStatus = "nomore";
} else {
this.loadingStatus = "nomore";
}
} else {
//
if (!isScroll) {
//isScrollnull
this.noDataScrollStatus = true;
this.isShowLoadMore = false;
} else {
this.noDataScrollStatus = false;
}
this.loadingStatus = "nomore";
}
uni.stopPullDownRefresh();
})
},
//Picker
showAndHiddenDatePicker() {
this.$refs.dataPicker.show();
},
//
confirmSelectedDate(e) {
this.selectedDate = e;
this.commissionDetail = [];
this.currentPage = 1;
this.getCommissionDataList({
artificerId: this.artificerId,
fundData: this.selectedDate,
fundType: this.activeRange,
limit: this.pageSize,
page: this.currentPage,
});
},
//
maskClick() {},
//(///)
selectedRange(item) {
if (item && item.id) {
if (item.id == this.activeRange) return;
this.activeRange = item.id;
this.currentPage = 1;
this.isScroll = false;
this.commissionDetail = [];
this.currentIncome = "";
this.selectedDate = this.getCurrentTimeStamp();
this.getCommissionDataList({
artificerId: this.artificerId,
fundData: this.selectedDate,
fundType: this.activeRange,
limit: this.pageSize,
page: this.currentPage,
});
}
},
//
getCurrentTimeStamp() {
let realDateTimeStamp = new Date();
let year = realDateTimeStamp.getFullYear();
let month = realDateTimeStamp.getMonth() + 1;
let day = realDateTimeStamp.getDate();
let currentDate = year + '-' + (month < 10 ? '0' + month : month) + '-' + (day < 10 ? '0' + day : day);
return currentDate;
},
}
}
</script>
<style scoped>
@import "./index.css";
</style>
<style>
page {
background-color: #f1f1f1;
height: 100%;
}
</style>