Skip to content

B
bigwood
Commit 99eb9318 authored by 罗超's avatar 罗超
Browse files
Options

修改

parent 63575108
Hide whitespace changes
Inline Side-by-side
Showing with 345 additions and 358 deletions
src/components/passbook/redEnvelope.vue
View file @ 99eb9318
<template>
<div class="bg-white q-mt-lg"
:style="{'margin':$q.platform.is.mobile?'20px 10px 0 10px':'',
'border-radius':$q.platform.is.desktop?'':'10px'}">
<rebatehead :title="titleHead"/>
<q-separator color="grey-3" class="q-my-sm" />
<div style="padding: 15px 0 0 0;"
:class="[$q.platform.is.desktop?'row justify-between':'column mobile']">
<div class="column col redEnvelope-left fz14"
:class="[$q.platform.is.desktop?'q-pl-sm':'']"
:style="{'padding':$q.platform.is.desktop?'0 25px 0 25px':''}">
<p class="fz14 text-grey-7"
:class="[$q.platform.is.desktop?'':'q-pl-md']">{{$t('v104.passbook.titles.text6')}}</p>
<div ref="main" :class="[$q.platform.is.desktop?'q-pt-lg':'']" style="height: 280px;position: relative;top: -30px;"
:style="{'width': $q.platform.is.desktop?'100%':'95%', 'left': $q.platform.is.desktop?'-20px':'10px','top': $q.platform.is.desktop?'-30px':'0'}"></div>
<div class="bg-white q-mt-lg" :style="{ margin: $q.platform.is.mobile ? '20px 10px 0 10px' : '', 'border-radius': $q.platform.is.desktop ? '' : '10px' }">
<rebatehead :title="titleHead" />
<q-separator color="grey-3" class="q-my-sm" />
<div style="padding: 15px 0 0 0" :class="[$q.platform.is.desktop ? 'row justify-between' : 'column mobile']">
<div class="column col redEnvelope-left fz14" :class="[$q.platform.is.desktop ? 'q-pl-sm' : '']" :style="{ padding: $q.platform.is.desktop ? '0 25px 0 25px' : '' }">
<p class="fz14 text-grey-7" :class="[$q.platform.is.desktop ? '' : 'q-pl-md']">{{ $t('v104.passbook.titles.text6') }}</p>
<div ref="main" :class="[$q.platform.is.desktop ? 'q-pt-lg' : '']" style="height: 280px; position: relative; top: -30px" :style="{ width: $q.platform.is.desktop ? '100%' : '95%', left: $q.platform.is.desktop ? '-20px' : '10px', top: $q.platform.is.desktop ? '-30px' : '0' }"></div>
</div>
<div v-if="$q.platform.is.desktop" class="row justify-center">
<q-separator vertical inset style="height: 50%; position: relative; top: 11%" />
</div>
<div class="redEnvelope-right" :class="[$q.platform.is.desktop ? 'col-4 column q-px-lg' : 'col row q-px-sm']" :style="{ padding: $q.platform.is.desktop ? '0 30px 0 30px' : '' }">
<div :class="[$q.platform.is.desktop ? 'q-pb-sm' : 'col-6 text-center']">
<div class="fz14 text-grey-7" :class="[$q.platform.is.desktop ? 'q-pb-xs' : '']">{{ $t('v104.passbook.titles.text9') }}</div>
<div class="row items-end" :class="[$q.platform.is.desktop ? 'q-pt-sm q-pb-lg' : 'justify-center']">
<span class="fz12"></span>
<div class="fz32 q-pl-sm">
<span style="position: relative; top: 9px">{{ datainfo.Amount }}</span>
</div>
<div v-if="$q.platform.is.desktop" class="row justify-center">
<q-separator vertical inset style="height: 50%;position: relative;top: 11%;"/>
</div>
<div class="redEnvelope-right"
:class="[$q.platform.is.desktop?'col-4 column q-px-lg':'col row q-px-sm']"
:style="{'padding':$q.platform.is.desktop?'0 30px 0 30px':''}"
>
<div :class="[$q.platform.is.desktop?'q-pb-sm':'col-6 text-center']">
<div class="fz14 text-grey-7" :class="[$q.platform.is.desktop?'q-pb-xs':'']">{{$t('v104.passbook.titles.text9')}}</div>
<div class="row items-end"
:class="[$q.platform.is.desktop?'q-pt-sm q-pb-lg':'justify-center']">
<span class="fz12">¥</span> <div class="fz32 q-pl-sm"><span style="position: relative;top: 9px;">{{datainfo.Amount}}</span></div>
</div>
</div>
<q-separator v-if="$q.platform.is.desktop" color="grey-3"/>
<div :class="[$q.platform.is.desktop?'q-pb-sm':'col-6 text-center']">
<div class="fz14 text-grey-7" :class="[$q.platform.is.desktop?'q-pb-xs q-pt-lg':'']">{{$t('v104.passbook.titles.text10')}}</div>
<div class="row items-end"
:class="[$q.platform.is.desktop?'q-pt-sm q-pb-lg':'justify-center']">
<span class="fz12">¥</span> <div class="fz32 q-pl-sm"><span style="position: relative;top: 9px;">{{datainfo.TotalMoney}}</span></div>
</div>
</div>
<q-separator v-if="$q.platform.is.desktop" color="grey-3"/>
</div>
</div>
<q-separator v-if="$q.platform.is.desktop" color="grey-3" />
<div :class="[$q.platform.is.desktop ? 'q-pb-sm' : 'col-6 text-center']">
<div class="fz14 text-grey-7" :class="[$q.platform.is.desktop ? 'q-pb-xs q-pt-lg' : '']">{{ $t('v104.passbook.titles.text10') }}</div>
<div class="row items-end" :class="[$q.platform.is.desktop ? 'q-pt-sm q-pb-lg' : 'justify-center']">
<span class="fz12">¥</span>
<div class="fz32 q-pl-sm">
<span style="position: relative; top: 9px">{{ datainfo.TotalMoney }}</span>
</div>
<q-separator v-if="$q.platform.is.mobile" color="grey-3"/>
</div>
</div>
<q-separator v-if="$q.platform.is.desktop" color="grey-3" />
</div>
<q-separator v-if="$q.platform.is.mobile" color="grey-3" />
</div>
<div :class="[$q.platform.is.desktop ? 'q-pb-lg q-px-lg' : 'q-py-md q-px-md']">
<span>{{ $t('v104.passbook.titles.text11') }}：</span><span class="q-pl-lg"></span><span class="fz32 q-pl-sm">{{ datainfo.Amount.toFixed(0) }}</span>
</div>
<div class="q-pt-sm" :class="[$q.platform.is.desktop ? 'q-px-lg' : 'q-px-md']">
<div class="q-pb-lg" v-for="(item, index) in datainfo.RatioList" :key="index" :class="[$q.platform.is.desktop ? 'row items-center no-wrap' : 'column']">
<div class="col">
<template v-if="$q.platform.is.desktop">
<q-linear-progress style="border-radius: 15px" v-if="item.percent > 1" stripe rounded size="20px" :value="item.width / 1000" color="orange-9" />
<q-linear-progress style="border-radius: 15px" v-else-if="item.percent < 1" stripe rounded size="20px" :value="item.width / 1000" color="red-5" />
<q-linear-progress style="border-radius: 15px" v-else stripe rounded size="20px" :value="item.width / 1000" color="cyan-4" />
</template>
<template v-else>
<q-linear-progress style="border-radius: 15px" v-if="item.percent > 1" stripe rounded size="10px" :value="item.width / 1000" color="orange-9" />
<q-linear-progress style="border-radius: 15px" v-else-if="item.percent < 1" stripe rounded size="10px" :value="item.width / 1000" color="red-5" />
<q-linear-progress style="border-radius: 15px" v-else stripe rounded size="10px" :value="item.width / 1000" color="cyan-4" />
</template>
</div>
<div :class="[$q.platform.is.desktop?'q-pb-lg q-px-lg':'q-py-md q-px-md']"><span>{{$t('v104.passbook.titles.text11')}}：</span><span class="q-pl-lg">¥</span><span class="fz32 q-pl-sm">{{datainfo.Amount.toFixed(2)}}</span> </div>
<div class="q-pt-sm" :class="[$q.platform.is.desktop?'q-px-lg':'q-px-md']">
<div class="q-pb-lg" v-for="(item,index) in datainfo.RatioList" :key="index"
:class="[$q.platform.is.desktop?'row items-center no-wrap':'column']">
<div class="col">
<template v-if="$q.platform.is.desktop">
<q-linear-progress style="border-radius: 15px;" v-if="item.percent>1" stripe rounded size="20px" :value="item.width/1000" color="orange-9"/>
<q-linear-progress style="border-radius: 15px;" v-else-if="item.percent<1" stripe rounded size="20px" :value="item.width/1000" color="red-5"/>
<q-linear-progress style="border-radius: 15px;" v-else stripe rounded size="20px" :value="item.width/1000" color="cyan-4"/>
</template>
<template v-else>
<q-linear-progress style="border-radius: 15px;" v-if="item.percent>1" stripe rounded size="10px" :value="item.width/1000" color="orange-9"/>
<q-linear-progress style="border-radius: 15px;" v-else-if="item.percent<1" stripe rounded size="10px" :value="item.width/1000" color="red-5"/>
<q-linear-progress style="border-radius: 15px;" v-else stripe rounded size="10px" :value="item.width/1000" color="cyan-4"/>
</template>
<div class="row items-center no-wrap" :class="[$q.platform.is.desktop ? 'col-4 q-ml-lg' : 'col']">
<div :class="[$q.platform.is.desktop ? '' : 'q-mr-sm']">
<template v-if="$q.platform.is.desktop">
<q-img v-if="item.percent > 1" src="../../assets/images/personal/gou.png" width="20px" height="20px" style="position: relative" />
<q-img v-else src="../../assets/images/personal/x1.png" width="26px" height="26px" style="position: relative" />
</template>
<template v-else>
<q-img v-if="item.percent > 1" src="../../assets/images/personal/gou.png" width="15px" height="15px" style="position: relative" />
<q-img v-else src="../../assets/images/personal/x1.png" width="16px" height="16px" style="position: relative" />
</template>
</div>
</div>
<div class="row items-center no-wrap"
:class="[$q.platform.is.desktop?'col-4 q-ml-lg':'col']">
<div :class="[$q.platform.is.desktop?'':'q-mr-sm']">
<template v-if="$q.platform.is.desktop">
<q-img v-if="item.percent>1" src="../../assets/images/personal/gou.png"
width="20px"
height="20px" style="position: relative;"/>
<q-img v-else src="../../assets/images/personal/x1.png"
width="26px"
height="26px" style="position: relative;"/>
</template>
<template v-else>
<q-img v-if="item.percent>1" src="../../assets/images/personal/gou.png"
width="15px"
height="15px" style="position: relative;"/>
<q-img v-else src="../../assets/images/personal/x1.png"
width="16px"
height="16px" style="position: relative;"/>
</template>
</div>
<div :class="[$q.platform.is.desktop ? 'column q-ml-md' : 'row no-wrap items-center justify-between q-pt-xs']">
<span class="row" :class="[item.percent > 1 ? 'text-light-green-6' : item.percent < 1 ? 'text-red-5' : 'text-dark', $q.platform.is.desktop ? 'wrap fz16 text-weight-bold' : 'fz12 col-6']">
<template v-if="item.percent > 1">
{{ $t('v104.passbook.titles.text12') }}
</template>
<div
:class="[$q.platform.is.desktop?'column q-ml-md':'row no-wrap items-center justify-between q-pt-xs']">
<span class="row"
:class="[item.percent>1?'text-light-green-6':item.percent<1?'text-red-5':'text-dark',$q.platform.is.desktop?'wrap fz16 text-weight-bold':'fz12 col-6']">
<template v-if="item.percent>1">{{$t('v104.passbook.titles.text12')}} ¥{{(item.Money*item.Ratio)/1000}}</template>
<template v-if="item.percent<1">{{$t('v104.passbook.titles.text13')}}¥{{item.Money-datainfo.Amount}},{{$t('v104.passbook.titles.text14')}} ¥{{(item.Money*item.Ratio)/1000}}</template>
</span>
<template v-if="item.percent < 1">
{{ $t('v104.passbook.titles.text13') }}
{{ item.Money - datainfo.GuestNum }}/{{ $t('travel.people') }},
{{ $t('v104.passbook.titles.text14') }}
¥{{ item.Ratio }} / {{ $t('travel.people') }}
</template>
</span>
<span class="fz12 text-grey-6 q-pt-xs"
:class="[$q.platform.is.desktop?'':'col-6']">{{$t('v104.passbook.titles.text15')}} ¥ {{item.Money}} {{$t('v104.passbook.titles.text16')}}{{item.Ratio}}‰</span>
</div>
</div>
</div>
<span class="fz12 text-grey-6 q-pt-xs" :class="[$q.platform.is.desktop ? '' : 'col-6']">
{{ $t('v104.passbook.titles.text15') }}
{{ item.Money }}
<span v-if="index<datainfo.RatioList.length-1">
-{{ datainfo.RatioList[index+1].Money-1 }}
</span>
<span v-else>
{{ $t('v104.passbook.titles.text17') }}
</span>
{{ $t('v104.passbook.titles.text16') }}
{{ item.Ratio }}/{{ $t('travel.people') }}
</span>
</div>
</div>
</div>
</div>
</div>
</template>
<script lang="ts">
import { ref, toRefs, onMounted, onBeforeUnmount } from "vue";
import { useRouter } from 'vue-router';
import { useQuasar } from 'quasar'
import { defineComponent, ref, reactive, toRefs } from 'vue'
import { useI18n } from 'vue-i18n'
import * as echarts from "echarts"
import rebatehead from '../../components/passbook/rebate/rebatehead.vue'
export default defineComponent({
name: 'user-info',
components: { rebatehead },
props: {
Obj: {
type: Object,
require: true
},
info: {
type: Object,
require: true
}
import { ref, toRefs, onMounted, onBeforeUnmount } from 'vue'
import { useRouter } from 'vue-router'
import { useQuasar } from 'quasar'
import { defineComponent, ref, reactive, toRefs } from 'vue'
import { useI18n } from 'vue-i18n'
import * as echarts from 'echarts'
import rebatehead from '../../components/passbook/rebate/rebatehead.vue'
export default defineComponent({
name: 'user-info',
components: { rebatehead },
props: {
Obj: {
type: Object,
require: true
},
setup(props) {
const $q = useQuasar()
const { t } = useI18n()
const $router = useRouter();
const main = ref();
const data=reactive({
titleHead: t('v104.passbook.titles.text5'),
xMonth:[] as Array<any>,
yMoney1:[] as Array<any>,
yMoney2:[] as Array<any>,
datainfo: null as any
})
if(props.Obj&&props.info){
data.xMonth = props.Obj.xMonth
data.yMoney1 = props.Obj.yMoney1
data.yMoney2 = props.Obj.yMoney2
data.datainfo = props.info
}
let chart = null
const methods = {
getinit() {
// 基于准备好的dom，初始化echarts实例
const myChart = echarts.init(main.value);
const option = {
xAxis: {
type: "category",
boundaryGap: false,
axisLine: {
show: false,
lineStyle: {
width: 30,
}
},
axisTick: false,
data: data.xMonth,
},
yAxis: {
type: "value",
min: '10',
axisTick: true,
splitLine: {
show: true,
lineStyle: {
color: "#fff"
}
},
},
grid: {
top: $q.platform.is.desktop?"30px":"20px",
left: $q.platform.is.desktop?"45px":"45px",
right: $q.platform.is.desktop?"30px":"20px",
bottom: $q.platform.is.desktop?"50px":"60px",
},
series: [
{
type: "line",
smooth: 2,
symbol: 'none',
data: data.yMoney1,
lineStyle: {
width: 3,
color: "#36C7D9",
},
itemStyle: {
borderWidth: 5,
color: "#FFFFFF",
},
areaStyle: {
color: "#A4E6EE"
}
},
{
type: "line",
smooth: 2,
data: data.yMoney2,
lineStyle: {
width: 3,
color: "#ED6A6B",
type: 'dashed'
},
itemStyle: {
borderWidth: 5,
},
info: {
type: Object,
require: true
}
},
setup(props) {
const $q = useQuasar()
const { t } = useI18n()
const $router = useRouter()
const main = ref()
const data = reactive({
titleHead: t('v104.passbook.titles.text5'),
xMonth: [] as Array<any>,
yMoney1: [] as Array<any>,
yMoney2: [] as Array<any>,
datainfo: null as any
})
if (props.Obj && props.info) {
data.xMonth = props.Obj.xMonth
data.yMoney1 = props.Obj.yMoney1
data.yMoney2 = props.Obj.yMoney2
data.datainfo = props.info
}
let chart = null
const methods = {
getinit() {
// 基于准备好的dom，初始化echarts实例
const myChart = echarts.init(main.value)
const option = {
xAxis: {
type: 'category',
boundaryGap: false,
axisLine: {
show: false,
lineStyle: {
width: 30
}
},
axisTick: false,
data: data.xMonth
},
areaStyle: {
color: "#FAD2D2"
}
}
]
yAxis: {
type: 'value',
min: '10',
axisTick: true,
splitLine: {
show: true,
lineStyle: {
color: '#fff'
}
}
},
grid: {
top: $q.platform.is.desktop ? '30px' : '20px',
left: $q.platform.is.desktop ? '45px' : '45px',
right: $q.platform.is.desktop ? '30px' : '20px',
bottom: $q.platform.is.desktop ? '50px' : '60px'
},
series: [
{
type: 'line',
smooth: 2,
symbol: 'none',
data: data.yMoney1,
lineStyle: {
width: 3,
color: '#36C7D9'
},
itemStyle: {
borderWidth: 5,
color: '#FFFFFF'
},
areaStyle: {
color: '#A4E6EE'
}
},
{
type: 'line',
smooth: 2,
data: data.yMoney2,
lineStyle: {
width: 3,
color: '#ED6A6B',
type: 'dashed'
},
itemStyle: {
borderWidth: 5
},
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
areaStyle: {
color: '#FAD2D2'
}
}
]
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option)
}
onBeforeUnmount(()=>{
})
onMounted(() => {
methods.getinit();
});
return {...toRefs(data),main,...methods}
}
})
</script>
onBeforeUnmount(() => {})
onMounted(() => {
methods.getinit()
})
return { ...toRefs(data), main, ...methods }
}
})
</script>
<style scoped>
.redEnvelope-form{
padding: 15px 30px 0 30px;
}
.redEnvelope-form.mobile{
padding: 15px 10px 0 20px;
}
.redEnvelope-left {
}
.redEnvelope-right{
}
</style>
\ No newline at end of file
.redEnvelope-form {
padding: 15px 30px 0 30px;
}
.redEnvelope-form.mobile {
padding: 15px 10px 0 20px;
}
.redEnvelope-left {
}
.redEnvelope-right {
}
</style>
src/i18n/en-US/index.ts
View file @ 99eb9318
......@@ -1524,7 +1524,7 @@ export default {
text6: 'Revenue in the past six months',
text7: 'Time selection',
text8: 'Select month',
text9: 'Accumulated number of transactions this year',
text9: 'Number of people this year',
text10: 'Accumulated revenue',
text11: 'Month Number',
text12: 'Activated, expected revenue',
......@@ -1532,6 +1532,7 @@ export default {
text14: 'Estimated Revenue',
text15: 'Monthly transaction amount has been reached',
text16: 'Return',
text17: 'up',
},
col: {
title1: 'Order',
......
src/i18n/ja-RB/index.ts
View file @ 99eb9318
......@@ -1522,14 +1522,15 @@ export default {
text6: '半年近くの収益',
text7: '時間の選択',
text8: '選択月',
text9: '本年の累計取引総額です',
text9: '本年の累計人数',
text10: '累積収益',
text11: '当面の取引額',
text11: '現在の人数',
text12: '活性化しています,収益見込み',
text13: 'まだまだ',
text14: '収益予想',
text15: '月の取引額はすでに達しました',
text16: '返します',
text17: '以下',
},
col:{
title1: '註文します',
......
src/i18n/zh-SW/index.ts
View file @ 99eb9318
......@@ -1525,14 +1525,15 @@ export default {
text6: '近半年收益',
text7: '时间选择',
text8: '选择月份',
text9: '本年累计交易总额',
text9: '本年累计人数',
text10: '累计收益',
text11: '当前交易额',
text11: '当前人数',
text12: '已激活，预计收益',
text13: '还差',
text14: '预计收益',
text15: '月交易额已达',
text16: '返',
text17: '以上',
},
col:{
title1: '订单',
......
src/i18n/zh-TW/index.ts
View file @ 99eb9318
......@@ -1527,14 +1527,15 @@ export default {
text6: '近半年收益',
text7: '時間選擇',
text8: '選擇月份',
text9: '本年累計交易總額',
text9: '本年累計人數',
text10: '累計收益',
text11: '當前交易額',
text11: '當前人數',
text12: '已激活，預計收益',
text13: '還差',
text14: '預計收益',
text15: '月交易額已達',
text16: '返',
text17: '以上',
},
col:{
title1: '訂單',
......
src/pages/passbook/passbook.vue
View file @ 99eb9318
<template>
<div class="column items-center">
<div class="q-mt-sm q-mb-lg"
:class="[$q.platform.is.desktop?'passbook-form':'']"
:style="{'width':$q.platform.is.mobile?'100%':''}">
<transition-group
v-if="!isUseDetails"
appear
enter-active-class="animated fadeInRight"
leave-active-class="animated fadeInLeft"
>
<template v-if="MonthObj&&datainfo">
<passbookHead :dataNum="datainfo?datainfo.Client_Balance:0"/>
<!-- <rebate/> -->
<redEnvelope :Obj="MonthObj" :info="datainfo"/>
</template>
</transition-group>
<transition
v-else
appear
enter-active-class="animated fadeInLeft"
leave-active-class="animated fadeInRight"
>
<useDetails/>
</transition>
</div>
<div class="column items-center">
<div class="q-mt-sm q-mb-lg" :class="[$q.platform.is.desktop ? 'passbook-form' : '']" :style="{ width: $q.platform.is.mobile ? '100%' : '' }">
<transition-group v-if="!isUseDetails" appear enter-active-class="animated fadeInRight" leave-active-class="animated fadeInLeft">
<template v-if="MonthObj && datainfo">
<passbookHead :dataNum="datainfo ? datainfo.Client_Balance : 0" />
<!-- <rebate/> -->
<redEnvelope :Obj="MonthObj" :info="datainfo" />
</template>
</transition-group>
<transition v-else appear enter-active-class="animated fadeInLeft" leave-active-class="animated fadeInRight">
<useDetails />
</transition>
</div>
</div>
</template>
<script lang="ts">
import useMetaModule from '../../module/meta/metaModule'
import { useRouter } from 'vue-router';
import { defineComponent, ref, reactive, toRefs, provide, inject } from 'vue'
import { useQuasar } from 'quasar'
import { ApiResult } from '../../@types/enumHelper'
import message from '../../utils/message'
import { useI18n } from 'vue-i18n'
import Store from '../../store'
import { DirtionmaryHelper } from '../../config/dictionary'
import passbookHead from '../../components/passbook/passbookHead.vue'
import rebate from '../../components/passbook/rebate.vue'
import redEnvelope from '../../components/passbook/redEnvelope.vue'
import useDetails from '../../components/passbook/useDetails.vue'
import passbookService from '../../api/passbook'
export default defineComponent({
name: 'user-info',
components: { passbookHead,rebate,redEnvelope,useDetails },
props: {},
setup() {
import useMetaModule from '../../module/meta/metaModule'
import { useRouter } from 'vue-router'
import { defineComponent, ref, reactive, toRefs, provide, inject } from 'vue'
import { useQuasar } from 'quasar'
import { ApiResult } from '../../@types/enumHelper'
import message from '../../utils/message'
import { useI18n } from 'vue-i18n'
import Store from '../../store'
import { DirtionmaryHelper } from '../../config/dictionary'
import passbookHead from '../../components/passbook/passbookHead.vue'
import rebate from '../../components/passbook/rebate.vue'
import redEnvelope from '../../components/passbook/redEnvelope.vue'
import useDetails from '../../components/passbook/useDetails.vue'
import passbookService from '../../api/passbook'
export default defineComponent({
name: 'user-info',
components: { passbookHead, rebate, redEnvelope, useDetails },
props: {},
setup() {
const $router = useRouter()
const $q = useQuasar()
const data = reactive({
datainfo: null as Object,
xMonth: [] as Array<any>,
yMoney1: [] as Array<any>,
yMoney2: [] as Array<any>,
MonthObj: null as Object
})
const $router = useRouter();
const $q = useQuasar()
const data=reactive({
datainfo:null as Object,
xMonth:[] as Array<any>,
yMoney1:[] as Array<any>,
yMoney2:[] as Array<any>,
MonthObj:null as Object
})
let { setTitle } = useMetaModule()
const { locale, t } = useI18n()
const pageTitle = inject(DirtionmaryHelper.PAGE_TITLE_KEY) as any
pageTitle.value = t('v104.passbook.pageTitle')
setTitle(pageTitle.value)
const ratioListBase = ref([
{
Money:5,
Ratio:100000,
},
{
Money:11,
Ratio:150000,
},
{
Money:16,
Ratio:200000,
},
{
Money:21,
Ratio:250000,
},
])
const isUseDetails = ref(false)
provide(DirtionmaryHelper.PASSBOOK_DETAILS,isUseDetails)
const methods = {
GetBigRedEnvelope() {
let CustomerId
if (Store.state && Store.state.user?.userDetail) {
CustomerId = Store.state.user?.userDetail?.customerId
}
$q.loading.show()
passbookService.GetCustomerBigRedEnvelope(CustomerId)
.then(r => {
let arr1=['-', '-', '-','-'];
let newarr=[];
if (r.data.resultCode == ApiResult.SUCCESS) {
data.datainfo=r.data.data;
data.datainfo.JQLRList.forEach((item,index)=>{
data.xMonth.push(item.Date)
if(index<5){
data.yMoney1.push(item.Money)
}
if(index>3){
newarr.push(item.Money);
data.yMoney2=arr1.concat(newarr);
}
})
data.datainfo.RatioList = ratioListBase.value
data.datainfo.RatioList.forEach(item=>{
item.percent=data.datainfo.Amount/item.Money;
item.width=(item.percent)*100;
})
console.log(data.datainfo.RatioList)
data.yMoney1=data.yMoney1.concat(["-"]);
data.MonthObj ={
xMonth: data.xMonth,
yMoney1: data.yMoney1,
yMoney2: data.yMoney2
let { setTitle } = useMetaModule()
const { locale, t } = useI18n()
const pageTitle = inject(DirtionmaryHelper.PAGE_TITLE_KEY) as any
pageTitle.value = t('v104.passbook.pageTitle')
setTitle(pageTitle.value)
const ratioListBase = ref([
{
Money: 5,
Ratio: 100000
},
{
Money: 11,
Ratio: 150000
},
{
Money: 16,
Ratio: 200000
},
{
Money: 21,
Ratio: 250000
}
])
const isUseDetails = ref(false)
provide(DirtionmaryHelper.PASSBOOK_DETAILS, isUseDetails)
const methods = {
GetBigRedEnvelope() {
let CustomerId
if (Store.state && Store.state.user?.userDetail) {
CustomerId = Store.state.user?.userDetail?.customerId
}
$q.loading.show()
passbookService
.GetCustomerBigRedEnvelope(CustomerId)
.then(r => {
let arr1 = ['-', '-', '-', '-']
let newarr = []
if (r.data.resultCode == ApiResult.SUCCESS) {
data.datainfo = r.data.data
data.datainfo.JQLRList.forEach((item, index) => {
data.xMonth.push(item.Date)
if (index < 5) {
data.yMoney1.push(item.Money)
}
} else {
message.errorMsg(r.data.message)
if (index > 3) {
newarr.push(item.Money)
data.yMoney2 = arr1.concat(newarr)
}
})
data.datainfo.RatioList = ratioListBase.value
data.datainfo.GuestNum = data.datainfo.GuestNum ? data.datainfo.GuestNum : 0
data.datainfo.RatioList.forEach(item => {
item.percent = data.datainfo.GuestNum / item.Money
item.width = item.percent * 100
})
data.yMoney1 = data.yMoney1.concat(['-'])
data.MonthObj = {
xMonth: data.xMonth,
yMoney1: data.yMoney1,
yMoney2: data.yMoney2
}
$q.loading.hide()
})
.catch(r => {
$q.loading.hide()
message.errorMsg(r.message)
})
},
} else {
message.errorMsg(r.data.message)
}
$q.loading.hide()
})
.catch(r => {
$q.loading.hide()
message.errorMsg(r.message)
})
}
methods.GetBigRedEnvelope()
return {...toRefs(data),isUseDetails,...methods}
}
})
</script>
methods.GetBigRedEnvelope()
return { ...toRefs(data), isUseDetails, ...methods }
}
})
</script>
<style>
.passbook-form{
width: 963px;
/* min-width: 663px; */
.passbook-form {
width: 963px;
/* min-width: 663px; */
}
</style>
\ No newline at end of file
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment