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