148 lines
3.5 KiB
Vue
148 lines
3.5 KiB
Vue
<template>
|
||
<view class="pr">
|
||
<image class="top-bg" src="/static/bg/bf-othedetail.png" mode=""></image>
|
||
<view class="top-box">
|
||
<view class="mb40">{{$t('N_I_129')}}:{{detail.actStartDate}} -{{detail.actEndDate}}</view>
|
||
<view v-if="detail.residueDay" class="mb20">{{$t('fn_112')}}<text>{{detail.residueDay}}</text>{{$t('S_L_6')}}</view>
|
||
<view v-else class="mb20">{{$t('fn_113')}}</view>
|
||
<view >{{ $t('N_I_87') }}：{{ orderAchieve }}</view>
|
||
</view>
|
||
<view class="pt20">
|
||
<view class="detail-item" v-for="(item,index) in listData" :key="index">
|
||
<view class="d-b-c mb20">
|
||
<view class="flex-1 f28 gray3" v-if="item.placeDept >= 4">
|
||
{{ item.placeDept}}<span v-if="languages==='en-US'">th</span> {{ '' }} {{ $t("fn_011") }}
|
||
</view>
|
||
<view class="flex-1 f28 gray3" v-else>
|
||
{{ item.placeDept}}{{ $t("fn_011") }}
|
||
</view>
|
||
<!-- <view class="flex-1 f28 gray3">{{$t('fn_010')}}{{item.placeDept}}{{$t('fn_011')}}</view> -->
|
||
<view class="f24 gray9 f-s-0">{{$t('S_C_7')}}:PV</view>
|
||
</view>
|
||
<view class="mb20">
|
||
<view class="f24 gray9">{{$t('fn_114')}}</view>
|
||
<view class="f28 gray3">{{formatNum(item.placeDeptPv)}}</view>
|
||
</view>
|
||
<view class="slider">
|
||
<view v-if="item.complianceFlag==1" class="slider-width"
|
||
:style="'width: '+((item.sumPv*100)/(item.placeDeptPv *1))+'%;'"></view>
|
||
<view v-if="item.complianceFlag==0" class="slider-width full" :style="'width: 100%;'"></view>
|
||
</view>
|
||
<view class="d-b-s">
|
||
<view class="flex-1">
|
||
<view class="redfb">{{$t('ENU_REA_S_1')}}</view>
|
||
<view class="f28 gray3">{{formatNum(item.notSumPv)}}</view>
|
||
</view>
|
||
<view class="flex-1">
|
||
<view class="green1E">{{$t('ENU_REA_S_0')}}</view>
|
||
<view class="f28 gray3">{{formatNum(item.sumPv)}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
pkId: '',
|
||
listData: [],
|
||
detail: {
|
||
|
||
},
|
||
languages:'',
|
||
title: '',
|
||
orderAchieve:'',
|
||
actTypes:''
|
||
}
|
||
},
|
||
onLoad(e) {
|
||
this.pkId = e.pkId;
|
||
this.title = e.actTypeVal;
|
||
this.actTypes= e.actType;
|
||
uni.setNavigationBarTitle({
|
||
title: this.title
|
||
});
|
||
this.getData();
|
||
this.languages= uni.getLocale();
|
||
},
|
||
methods: {
|
||
getData() {
|
||
let self = this;
|
||
self._get('activity/api/other/other-detail/' + self.pkId, {}, res => {
|
||
self.listData = res.data.detailList;
|
||
self.detail = res.data;
|
||
self.orderAchieve= res.data.orderAchieve;
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.top-bg {
|
||
position: absolute;
|
||
height: 230rpx;
|
||
width: 750rpx;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 0;
|
||
}
|
||
|
||
.top-box {
|
||
position: relative;
|
||
z-index: 1;
|
||
height: 230rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: flex-start;
|
||
padding: 0 25rpx;
|
||
color: #fff;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.detail-item {
|
||
background-color: #fff;
|
||
width: 706rpx;
|
||
margin: 0 auto;
|
||
box-sizing: border-box;
|
||
padding: 28rpx 20rpx 33rpx 20rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 20rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.slider {
|
||
width: 665rpx;
|
||
height: 18rpx;
|
||
background: #EEEEEE;
|
||
border-radius: 9rpx;
|
||
position: relative;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.slider-width {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
height: 18rpx;
|
||
border-radius: 9rpx;
|
||
background-color: #FB3024;
|
||
z-index: 1;
|
||
}
|
||
|
||
.slider-width.full {
|
||
background: #FFB85C;
|
||
}
|
||
|
||
.redfb {
|
||
color: #FB3024;
|
||
}
|
||
|
||
.green1E {
|
||
color: #1EBD85;
|
||
}
|
||
</style> |