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>
|