501 lines
13 KiB
Vue
501 lines
13 KiB
Vue
<template>
|
||
<view class="pb40">
|
||
<!-- <view class="content">
|
||
<view class="d-s-c mb30">
|
||
<picker style="margin-right: 20rpx;" :range="monthList" @change="changeMonth">
|
||
<view class="picker-small">
|
||
<text>{{ monthIndex + 1 }}{{ $t('ENU_SETTLE_P_3') }}</text>
|
||
<u-icon name="arrow-down-fill" size="28rpx" color="#333"></u-icon>
|
||
</view>
|
||
</picker>
|
||
<picker :range="typeList" @change="changeType">
|
||
<view class="picker-small">
|
||
<text>{{ typeList[achievementType] }}</text>
|
||
<u-icon name="arrow-down-fill" size="28rpx" color="#333"></u-icon>
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
<view class=" content-box box-2">
|
||
<view class="d-b-s">
|
||
<view class="mb20 flex-1 ">{{ $t('w_0135') }}</view>
|
||
<view class="mb20 flex-1 ">{{ $t('S_C_18') + $t('w_0136') }}</view>
|
||
<view class="mb20 flex-1 ">{{ $t('N_I_88') }}</view>
|
||
</view>
|
||
<view class="d-b-c">
|
||
<view class="f30 fb flex-1 ">{{ formatNum(detail.leftAchieve || 0) }}</view>
|
||
<view class="f30 fb flex-1 ">{{ formatNum(detail.leftDirectAchieve || 0) }}</view>
|
||
<view class="f30 fb flex-1 ">{{ detail.leftCoun }}</view>
|
||
</view>
|
||
</view>
|
||
<view class="d-c-s d-c content-box box-3">
|
||
<view class="mb20">{{ $t('w_0136') }}</view>
|
||
<view class="f30 fb">{{ formatNum(detail.directAchieve) }}</view>
|
||
</view>
|
||
<view class=" content-box box-2">
|
||
<view class="d-b-s">
|
||
<view class="mb20 flex-1 ">{{ $t('w_0137') }}</view>
|
||
<view class="mb20 flex-1 ">{{ $t('S_C_19') + $t('w_0136') }}</view>
|
||
<view class="mb20 flex-1 ">{{ $t('N_I_92') }}</view>
|
||
</view>
|
||
<view class="d-b-c">
|
||
<view class="f30 fb flex-1">{{ formatNum(detail.rightAchieve || 0) }}</view>
|
||
<view class="f30 fb flex-1">{{ formatNum(detail.rightDirectAchieve || 0) }}</view>
|
||
<view class="f30 fb flex-1">{{ detail.rightCount }}</view>
|
||
</view>
|
||
</view>
|
||
</view> -->
|
||
<view class="pt40">
|
||
<view class="title">{{$t('ENU_MENU_512')}}</view>
|
||
<view class="pt30">
|
||
<view class="d-c-c d-c" style="margin-bottom: 100rpx;" @click="getMould('detail1', diagramDetail.memberCode)">
|
||
<view><image class="user-img" src="/static/default.png" mode=""></image></view>
|
||
<view class="f28 gray3">{{ diagramDetail.memberCode }}</view>
|
||
<view class="f24 gray6">{{ diagramDetail.memberName }}</view>
|
||
</view>
|
||
<view class="d-a-c list-wrap" :class="memberAchieveDisVOList && memberAchieveDisVOList.length > 4 ? '' : 'short-small'">
|
||
<template v-for="(v, idx) in memberAchieveDisVOList">
|
||
<view class="d-c-c d-c list-item" @click="getMould('detail2', v.lastMemberCode)" :key="idx">
|
||
<view><image class="user-img" src="/static/default.png" mode=""></image></view>
|
||
<view class="f24 gray3">{{ v.lastMemberCode }}</view>
|
||
<view class="f24 gray3 mb10 mt10">{{ $t('N_I_101') }}</view>
|
||
<view class="f28 gray3" v-if="v.placeDept >= 4">
|
||
{{ v.placeDept}}<span v-if="languages==='en-US'">th</span> {{ '' }} {{ $t("fn_011") }}
|
||
</view>
|
||
<view class="f28 gray3" v-else>
|
||
{{ v.placeDept }}{{ $t("fn_011") }}
|
||
</view>
|
||
<!-- <view class="f28 gray3">{{ $t('fn_010')+v.placeDept+$t('fn_011') }}</view> -->
|
||
</view>
|
||
</template>
|
||
<!-- <template v-for="(v,idx) in memberAchieveDisVOList" :key="idx">
|
||
<view class="d-c-c d-c">
|
||
<view><image class="user-img" src="/static/default.png" mode=""></image></view>
|
||
<view class="f24 gray3">{{ v.lastMemberName }}</view>
|
||
<view class="f28 gray3">{{ $t('N_I_101') }}</view>
|
||
<view class="f24 gray6">{{ $t('S_C_18') }}</view>
|
||
</view>
|
||
</template> -->
|
||
|
||
<!-- <view class="d-c-c d-c" @click="getMould('detail2', diagramDetail.leftMember.lastMemberCode)">
|
||
<view><image class="user-img" src="/static/default.png" mode=""></image></view>
|
||
<view class="f28 gray3">{{ diagramDetail.leftMember.lastMemberCode }}</view>
|
||
<view class="f28 gray3">{{ $t('N_I_101') }}</view>
|
||
<view class="f24 gray6">{{ $t('S_C_18') }}</view>
|
||
</view>
|
||
<view class="d-c-c d-c" @click="getMould('detail3', diagramDetail.rightMember.lastMemberCode)">
|
||
<view><image class="user-img" src="/static/default.png" mode=""></image></view>
|
||
<view class="f28 gray3">{{ diagramDetail.rightMember.lastMemberCode }}</view>
|
||
<view class="f28 gray3">{{ $t('N_I_101') }}</view>
|
||
<view class="f24 gray6">{{ $t('S_C_19') }}</view>
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
<template v-if="isOpen">
|
||
<view class="pop-bg" @click.stop="isOpen = false"></view>
|
||
<view class="pop-content">
|
||
<view class="mb10">{{ $t('N_I_124') }}</view>
|
||
<view class="mb10">
|
||
{{ module[detailMould].memberCode }}
|
||
<text class="ml20 copy-text" @click="copyFunc(module[detailMould].memberCode)">{{ $t('MY_CK_27') }}</text>
|
||
</view>
|
||
<view class="mb10">{{ $t('CK_KS_14') }}:{{ module[detailMould].memberName }}</view>
|
||
<view class="mb10">{{ $t('PER_DA_9') }}:{{ module[detailMould].payTime }}</view>
|
||
<view>{{ $t('w_0306') }}:{{ formatNum(module[detailMould].consumeAchieve) }}</view>
|
||
</view>
|
||
</template>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
now: 0,
|
||
monthList: [],
|
||
typeList: [this.$t('ENU_ACHIEVEMENT_TYPE_1'), this.$t('ENU_ACHIEVEMENT_TYPE_2'), this.$t('ENU_ACHIEVEMENT_TYPE_3')],
|
||
monthIndex: 0,
|
||
detail: {
|
||
leftCoun: 0,
|
||
rightCount: 0,
|
||
leftAchieve: 0,
|
||
rightAchieve: 0,
|
||
directAchieve: 0
|
||
},
|
||
achievementType: 0,
|
||
// example: [],
|
||
diagramDetail: {
|
||
imageUrl: '',
|
||
leftMember: {
|
||
lastImageUrl: '',
|
||
lastMemberCode: '',
|
||
lastMemberName: ''
|
||
},
|
||
memberCode: '',
|
||
memberName: '',
|
||
rightMember: {
|
||
lastImageUrl: '',
|
||
lastMemberCode: '',
|
||
lastMemberName: ''
|
||
}
|
||
},
|
||
memberCode: '',
|
||
module: {
|
||
detail1: null,
|
||
detail2: null,
|
||
detail3: null
|
||
},
|
||
|
||
isOpen: false,
|
||
detailMould: '',
|
||
languages:'',
|
||
memberAchieveDisVOList: []
|
||
};
|
||
},
|
||
onLoad() {
|
||
this.getDiagramData();
|
||
this.initDate();
|
||
this.languages= uni.getLocale();
|
||
},
|
||
methods: {
|
||
copyFunc(data) {
|
||
let self = this;
|
||
uni.setClipboardData({
|
||
data: data,
|
||
showToast: false,
|
||
success: function() {
|
||
uni.showToast({
|
||
title: self.$t('MY_CK_29'),
|
||
icon: 'none'
|
||
});
|
||
console.log('success');
|
||
}
|
||
});
|
||
},
|
||
dowloadFunc(e, name) {
|
||
let self = this;
|
||
uni.showLoading({
|
||
title: self.$t('w_0421')
|
||
});
|
||
uni.downloadFile({
|
||
url: e, //调接口返给的url
|
||
success: function(res) {
|
||
console.log(res);
|
||
if (res.statusCode == 200) {
|
||
var Path = res.tempFilePath; //调 uni.downloadFile成功之后，会返给tempFilePath
|
||
uni.saveFile({
|
||
tempFilePath: Path,
|
||
success: function(result) {
|
||
var savedFilePath = result.savedFilePath;
|
||
self.fSetFileName(savedFilePath, name, e);
|
||
},
|
||
fail: err => {
|
||
uni.showToast({
|
||
title: self.$t('w_0406'),
|
||
icon: 'none'
|
||
});
|
||
uni.hideLoading();
|
||
}
|
||
});
|
||
} else {
|
||
uni.showToast({
|
||
title: self.$t('w_0407'),
|
||
icon: 'none'
|
||
});
|
||
}
|
||
uni.hideLoading();
|
||
},
|
||
fail: err => {
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
title: self.$t('w_0408'),
|
||
icon: 'none'
|
||
});
|
||
}
|
||
});
|
||
},
|
||
fSetFileName(sFilePath, sFileName, e) {
|
||
let self = this;
|
||
var sFileName = sFileName.split('/')[sFileName.split('/').length - 1]; //原来的文件名
|
||
var aFileUrl = sFilePath.split('/').splice(0, sFilePath.split('/').length - 1); //saveFile API保存的本地地址
|
||
var url = e; //请求地址
|
||
let dtask = plus.downloader.createDownload(
|
||
url,
|
||
{
|
||
filename: '_downloads' + aFileUrl.join('/') + '/' + sFileName //利用保存路径，实现文件的重命名
|
||
},
|
||
(d, status) => {
|
||
if (status == 200) {
|
||
let fileSaveUrl = plus.io.convertLocalFileSystemURL(d.filename);
|
||
self.fGetSavedFileList();
|
||
console.log('-----------------');
|
||
console.log(fileSaveUrl);
|
||
/*uni.openDocument({
|
||
filePath: escape(fileSaveUrl),
|
||
fail: e => {
|
||
console.log(JSON.stringify(e));
|
||
console.log(escape(fileSaveUrl));
|
||
console.log(e);
|
||
uni.showToast({
|
||
title: `打开失败`
|
||
});
|
||
}
|
||
});*/
|
||
setTimeout(
|
||
() =>
|
||
uni.openDocument({
|
||
filePath: fileSaveUrl,
|
||
showMenu: false,
|
||
success: function() {
|
||
console.log('打开文档成功');
|
||
},
|
||
fail: function(e) {
|
||
console.log(e);
|
||
uni.showToast({
|
||
title: this.$t('w_0410'),
|
||
duration: 2000,
|
||
icon: 'none'
|
||
});
|
||
}
|
||
}),
|
||
1000
|
||
);
|
||
} else {
|
||
//下载失败
|
||
plus.downloader.clear(); //清除下载任务
|
||
}
|
||
}
|
||
);
|
||
dtask.setRequestHeader('Authorization', 'Bearer ' + uni.getStorageSync('SET_TOKEN'));
|
||
dtask.start();
|
||
},
|
||
changeType(e) {
|
||
this.achievementType = e.detail.value;
|
||
this.getData();
|
||
},
|
||
changeMonth(e) {
|
||
this.monthIndex = e.detail.value;
|
||
this.getData();
|
||
},
|
||
initDate() {
|
||
let date = new Date();
|
||
let self = this;
|
||
self.now = date.getMonth();
|
||
for (var i = 1; i <= self.now + 1; i++) {
|
||
self.monthList.push(i);
|
||
}
|
||
this.monthIndex = self.now;
|
||
// this.getData();
|
||
console.log(self.monthList);
|
||
},
|
||
getDiagramData() {
|
||
let self = this;
|
||
self._get('member/api/achieve/query-place-tree', {}, res => {
|
||
self.diagramDetail = res.data;
|
||
self.memberAchieveDisVOList = res.data && res.data.memberAchieveDisVOList;
|
||
});
|
||
},
|
||
getMould(e, code) {
|
||
let self = this;
|
||
self.detailMould = e;
|
||
self.memberCode = code;
|
||
self.getDetail();
|
||
/* let self = this;
|
||
self.detailMould = e;
|
||
self.memberCode = code;
|
||
if (!self[e]) {
|
||
self.getDetail();
|
||
} else {
|
||
this.isOpen = true;
|
||
} */
|
||
},
|
||
getDetail() {
|
||
let self = this;
|
||
self._post(
|
||
'member/api/achieve/query-place-tree-detail',
|
||
{
|
||
memberCode: self.memberCode
|
||
},
|
||
res => {
|
||
self.module[self.detailMould] = res.data;
|
||
this.isOpen = true;
|
||
}
|
||
);
|
||
},
|
||
getData() {
|
||
return;
|
||
let self = this;
|
||
uni.showLoading({
|
||
title: 'Loading...'
|
||
});
|
||
self._get(
|
||
'member/api/achieve/place-new-add-achieve-stat',
|
||
{
|
||
monthType: self.monthIndex + 1,
|
||
achievementType: self.achievementType + 1
|
||
},
|
||
res => {
|
||
self.detail = res.data;
|
||
},
|
||
false,
|
||
com => {
|
||
uni.hideLoading();
|
||
}
|
||
);
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background: #fff;
|
||
}
|
||
|
||
.list-wrap {
|
||
flex-wrap: nowrap;
|
||
overflow-x: auto;
|
||
justify-content: flex-start;
|
||
padding: 0 22rpx;
|
||
&.short-small {
|
||
justify-content: space-around;
|
||
}
|
||
.list-item {
|
||
margin-right: 30rpx;
|
||
&:last-child {
|
||
margin-right: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
.content {
|
||
padding: 26rpx 22rpx 26rpx 23rpx;
|
||
}
|
||
|
||
.picker-small {
|
||
width: 232rpx;
|
||
height: 72rpx;
|
||
border: 1rpx solid #eeeeee;
|
||
border-radius: 15rpx;
|
||
font-size: 28rpx;
|
||
padding: 0 28rpx 0 20rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.content-box {
|
||
padding: 0 20rpx;
|
||
min-height: 156rpx;
|
||
border-radius: 10rpx;
|
||
color: #fff;
|
||
font-size: 28rpx;
|
||
margin-bottom: 25rpx;
|
||
}
|
||
|
||
.box-1 {
|
||
background: linear-gradient(180deg, #fc7c7c 0%, #f65757 100%);
|
||
}
|
||
|
||
.box-2 {
|
||
padding-top: 30rpx;
|
||
background: linear-gradient(180deg, #ff9354 0%, #ff7f36 100%);
|
||
}
|
||
|
||
.box-3 {
|
||
background: linear-gradient(180deg, #677af9 0%, #697bf2 100%);
|
||
}
|
||
.title {
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
margin-left: 22rpx;
|
||
position: relative;
|
||
padding-left: 12rpx;
|
||
&::before {
|
||
content: '';
|
||
width: 3px;
|
||
height: calc(100% - 14rpx);
|
||
background: #fb3024;
|
||
position: absolute;
|
||
left: 0;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
}
|
||
}
|
||
|
||
.user-img {
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.pop-bg {
|
||
position: fixed;
|
||
left: 0;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background-color: rgba(0, 0, 0, 0.3);
|
||
z-index: 98;
|
||
}
|
||
|
||
.pop-content {
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
top: 30%;
|
||
margin: auto;
|
||
width: 60%;
|
||
background: #ffffff;
|
||
border: 1px solid #fb3024;
|
||
box-shadow: 0rpx 5rpx 3rpx 0rpx rgba(0, 0, 0, 0.1);
|
||
border-radius: 15rpx;
|
||
font-size: 24rpx;
|
||
color: #666;
|
||
padding: 33rpx 15rpx;
|
||
z-index: 99;
|
||
line-height: 1.5;
|
||
}
|
||
.example-box {
|
||
background: #ffffff;
|
||
border-radius: 20rpx;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
padding: 22rpx 0 28rpx 0;
|
||
height: 312rpx;
|
||
overflow-y: auto;
|
||
margin-bottom: 20rpx;
|
||
|
||
.example-item {
|
||
width: 20%;
|
||
flex-shrink: 0;
|
||
padding: 10rpx;
|
||
box-sizing: border-box;
|
||
|
||
.example-ava {
|
||
width: 104rpx;
|
||
height: 104rpx;
|
||
display: block;
|
||
}
|
||
|
||
.example-name {
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
word-break: break-all;
|
||
}
|
||
}
|
||
}
|
||
.copy-text {
|
||
// border: 1px solid #ebedf0;
|
||
padding: 5rpx 12rpx;
|
||
border-radius: 12rpx;
|
||
font-size: 22rpx;
|
||
background-color: #ccc;
|
||
color: #fff;
|
||
}
|
||
</style>
|