295 lines
7.3 KiB
Vue
295 lines
7.3 KiB
Vue
<template>
|
||
<view class="content">
|
||
<view class="tab">
|
||
<view v-for="(item, index) in tabList" :key="index" @click="isTab = item.value" class="tab_i"
|
||
:class="[isTab===item.value?'heng':'heng1']">
|
||
{{ item.label }}
|
||
</view>
|
||
</view>
|
||
<view class="flex_box">
|
||
<view class="neibox" @click="calendarShow=true">
|
||
<view>{{riqi?riqi:'日期筛选'}}</view>
|
||
<u-icon name="arrow-down-fill" color="#000000" size="14"></u-icon>
|
||
</view>
|
||
<view class="neibox" @click="listShow=true">
|
||
<view>{{statusName?statusName:'考核状态'}}</view>
|
||
<u-icon name="arrow-down-fill" color="#000000" size="14"></u-icon>
|
||
</view>
|
||
<view class="seatch_r" @click="getDataList">
|
||
<u-icon name="search" size="22" color="#fff"></u-icon>
|
||
</view>
|
||
</view>
|
||
<view class="jifen">
|
||
<view class="jifen_left">
|
||
{{isTab==0?"复购考核积分":"分红考核积分"}}
|
||
</view>
|
||
<view class="jifen_right">
|
||
{{achieve}}
|
||
</view>
|
||
</view>
|
||
<view class="thecontent" v-for='(item,index) in tableData' :key="index">
|
||
<view class="line_box">
|
||
<view class='line1'>交易日期</view>
|
||
<view class='line2'>{{item.tradeTime}}</view>
|
||
</view>
|
||
<view class="line_box">
|
||
<view class='line1'>交易记录</view>
|
||
<view class='line2'>{{item.tradeAchieveSign}}</view>
|
||
</view>
|
||
<view class="line_box">
|
||
<view class='line1'>考核类型</view>
|
||
<view class='line2'>{{item.changeTypeVal}}</view>
|
||
</view>
|
||
<view class="line_box" v-if="item.assessStatus!=null">
|
||
<view class='line1'>考核状态</view>
|
||
<view class='line3'>{{item.assessStatusVal}}</view>
|
||
</view>
|
||
</view>
|
||
<u-calendar :minDate='minDate' :maxDate='maxDate' :show="calendarShow" monthNum='100'
|
||
@close="calendarShow=false" maxRange='300' mode="range" @confirm="confirmCalendar"></u-calendar>
|
||
<u-picker @cancel='listShow=false' :show="listShow" ref="uPicker" :columns="assessStatusList" @confirm="confirm"
|
||
keyName='label'></u-picker>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import * as mar from "@/config/market.js"
|
||
export default {
|
||
data() {
|
||
return {
|
||
tabList: [{
|
||
value: 0,
|
||
label: "复购考核"
|
||
},
|
||
// {
|
||
// value: 1,
|
||
// label: "分红考核"
|
||
// }
|
||
],
|
||
isTab: 0,
|
||
queryParams: {
|
||
startDate: "",
|
||
endDate: "",
|
||
assessType: 0,
|
||
assessStatus: ""
|
||
},
|
||
achieve: "",
|
||
tableData: [],
|
||
calendarShow: false,
|
||
defaultDate: [],
|
||
minDate: "",
|
||
maxDate: "",
|
||
riqi: "",
|
||
assessStatusList: [],
|
||
listShow: false,
|
||
statusName: "",
|
||
monthFirstday: "",
|
||
monthLastday: "",
|
||
|
||
}
|
||
},
|
||
watch: {
|
||
isTab(n, o) {
|
||
this.queryParams.assessType = n
|
||
this.getDataList()
|
||
},
|
||
},
|
||
onLoad() {
|
||
let date = new Date();
|
||
let year = date.getFullYear();
|
||
let month = date.getMonth() + 1;
|
||
let day = date.getDate();
|
||
if (month <= 9) {
|
||
month = '0' + month;
|
||
}
|
||
if (day <= 9) {
|
||
day = '0' + day;
|
||
}
|
||
let minyear = year - 1;
|
||
this.minDate = minyear + '-' + month + '-' + day;
|
||
let maxyear = year + 1;
|
||
this.maxDate = maxyear + '-' + month + '-' + day;
|
||
this.defaultDate[0] = year + '-' + month + '-' + day;
|
||
this.getOthers()
|
||
this.getDataList()
|
||
this.getStartTime();
|
||
this.getEndTime();
|
||
this.riqi = this.monthFirstday + '~' + this.monthLastday
|
||
},
|
||
methods: {
|
||
getStartTime() {
|
||
let date = new Date();
|
||
let year = date.getFullYear(); // 得到当前年份
|
||
let month = date.getDate() === 1 ? date.getMonth() : date.getMonth() + 1; // 得到当前月份（0-11月份，+1是当前月份）
|
||
date.setDate(1); // 将当前时间的日期设置成第一天
|
||
month = month >= 9 ? month : "0" + month; // 补零
|
||
let day = date.getDate(); // 得到当前天数，实际是本月第一天，因为前面setDate(1) 设置过了
|
||
day = day >= 10 ? day : "0" + day; // 补零
|
||
this.monthFirstday = year + "-" + month + "-" + day;
|
||
this.queryParams.startDate = this.monthFirstday;
|
||
console.log("🌈 this.monthFirstday", this.monthFirstday);
|
||
},
|
||
getEndTime() {
|
||
let date = new Date();
|
||
let year = date.getFullYear(); // 得到当前年份
|
||
let month = date.getDate() === 1 ? date.getMonth() : date.getMonth() + 1; // 得到当前月份（0-11月份，+1是当前月份）
|
||
month = month >= 9 ? month : "0" + month; // 补零
|
||
let day = date.getDate(); // 得到当前天数，实际是本月第一天，因为前面setDate(1) 设置过了
|
||
day = day >= 10 ? day : "0" + day; // 补零
|
||
this.monthLastday = year + "-" + month + "-" + day + " ";
|
||
this.queryParams.endDate = this.monthLastday;
|
||
console.log("🌈this.monthLastday", this.monthLastday);
|
||
},
|
||
confirm(e) {
|
||
// console.log('🌈eeee',e)
|
||
this.queryParams.assessStatus = e.value[0].value
|
||
this.statusName = e.value[0].label
|
||
this.listShow = false
|
||
|
||
},
|
||
confirmCalendar(e) {
|
||
this.queryParams.startDate = e[0]; // 获取选择的起始日期
|
||
this.queryParams.endDate = e[e.length - 1]; // 获取选择的结束日期
|
||
this.riqi = e[0] + '~' + e[e.length - 1]
|
||
this.calendarShow = false
|
||
},
|
||
getOthers() {
|
||
mar.getAssessStatusList().then(res => {
|
||
this.assessStatusList = [res.data];
|
||
})
|
||
},
|
||
getDataList() {
|
||
mar.getAssessList(this.queryParams).then(res => {
|
||
this.tableData = res.rows
|
||
})
|
||
|
||
mar.getAssAchieve({
|
||
assessType: this.isTab
|
||
}).then((res) => {
|
||
this.achieve = res.data;
|
||
});
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.content {
|
||
background: #F2F2F2;
|
||
padding-bottom: 20rpx;
|
||
|
||
.tab {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
margin-bottom: 6rpx;
|
||
background-color: #FFFFFF;
|
||
|
||
.tab_i {
|
||
text-align: center;
|
||
font-size: 28rpx;
|
||
font-family: PingFang SC;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
white-space: nowrap;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: 24rpx 0;
|
||
// background-color: pink;
|
||
|
||
}
|
||
|
||
.heng {
|
||
border-bottom: 6rpx solid #FB3024;
|
||
color: #FB3024;
|
||
|
||
}
|
||
|
||
.heng {
|
||
color: #333333;
|
||
}
|
||
|
||
}
|
||
|
||
.flex_box {
|
||
background-color: #FFFFFF;
|
||
padding: 30rpx 20rpx 30rpx 50rpx;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
display: flex;
|
||
font-size: 26rpx;
|
||
font-family: PingFang SC;
|
||
font-weight: 400;
|
||
color: #999999;
|
||
|
||
.neibox {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.seatch_r {
|
||
background: #fb3024;
|
||
border-radius: 50%;
|
||
padding: 8rpx;
|
||
margin-left: 24rpx;
|
||
}
|
||
}
|
||
|
||
.jifen {
|
||
margin-top: 25rpx;
|
||
background-color: rgba(251, 48, 36, 0.15);
|
||
padding: 45rpx 28rpx;
|
||
|
||
color: #FB3024;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.jifen_left {
|
||
font-size: 26rpx;
|
||
font-weight: 400;
|
||
}
|
||
|
||
.jifen_right {
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
|
||
.thecontent {
|
||
background-color: #FFFFFF;
|
||
margin-bottom: 21rpx;
|
||
padding: 10rpx 23rpx 30rpx 23rpx;
|
||
|
||
.line_box {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-top: 20rpx;
|
||
|
||
.line1 {
|
||
font-size: 26rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #999999;
|
||
}
|
||
|
||
.line2 {
|
||
font-size: 26rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
}
|
||
|
||
.line3 {
|
||
font-size: 26rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: rgba(251, 48, 36, 1);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|